import React from 'react';
import { FormattedMessage } from 'react-intl';
import { listTimeZones } from 'timezone-support';
import DropDown from 'components/common/DropDown';
import Button from 'components/common/Button';
import useTimezone from 'hooks/useTimezone';
import { getTimezone } from 'lib/date';
import styles from './TimezoneSetting.module.css';

export default function TimezoneSetting() {
  const [timezone, saveTimezone] = useTimezone();
  const options = listTimeZones().map(n => ({ label: n, value: n }));

  function handleReset() {
    saveTimezone(getTimezone());
  }

  return (
    <>
      <DropDown
        menuClassName={styles.menu}
        value={timezone}
        options={options}
        onChange={saveTimezone}
      />
      <Button className={styles.button} size="small" onClick={handleReset}>
        <FormattedMessage id="label.reset" defaultMessage="Reset" />
      </Button>
    </>
  );
}