import React, { Component } from 'react';
import PropTypes from 'prop-types';
import CustomSelect from '../CustomSelect';

import timezoneList from './timezoneList';

export default class TimezonePicker extends Component {
  static propTypes = {
    /**
     * (Inherited from CustomSelect) The selected value, if any.
     */
    selectedValue: PropTypes.string,
    /**
     * (Inherited from CustomSelect) The label to display on top of the component.
     */
    label: PropTypes.string,
    /**
     * (Inherited from CustomSelect) The text to display if no option is selected.
     */
    noSelectionLabel: PropTypes.string,
    /**
     * (Inherited from CustomSelect) The callback to execute when the value changes.
     * @param {{ name: string, text: string, value: string, altered: boolean }} timezone
     */
    onChange: PropTypes.func,
    /**
     * All other props are also passed through to the CustomSelect.
     */
  };

  static defaultProps = {
    /**
     * (Inherited from CustomSelect) The selected value, if any.
     */
    selectedValue: undefined,
    /**
     * (Inherited from CustomSelect) The label to display on top of the component.
     */
    label: undefined,
    /**
     * (Inherited from CustomSelect) The text to display if no option is selected.
     */
    noSelectionLabel: undefined,
    /**
     * (Inherited from CustomSelect) The callback to execute when the value changes.
     */
    onChange: () => {},
  };

  render() {
    const options = timezoneList.map(timezoneEntry => ({
      text: `(${timezoneEntry.diff}) ${timezoneEntry.name}`,
      value: timezoneEntry.id,
    }));

    return <CustomSelect name="timezone" options={options} {...this.props} />;
  }
}