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

// presorted by "countryName"
import sortedTimezoneList from './sortedTimezoneList.json';

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,
    /**
     * Optional function that provides the sortedTimezonesList as an argument and allows to build a custom options array for the <CustomSelect />
     * WARNING: If you use this, make sure to follow the CustomSelect API for options
     */
    timezoneOptionsFormatter: PropTypes.func,
    /**
     * All other props are also passed through to the CustomSelect.
     */
  };

  static defaultProps = {
    selectedValue: undefined,
    label: undefined,
    noSelectionLabel: undefined,
    onChange: () => {},
    timezoneOptionsFormatter: undefined,
  };

  constructor(props) {
    super(props);

    this.options = sortedTimezoneList.map(timezone => ({
      text: `${timezone.countryName} - ${timezone.mainCities.join(', ')}`,
      value: timezone.name,
      markup: (
        <div>
          <span className="bold">{timezone.countryName}</span> - <span>{timezone.mainCities.join(', ')}</span>
        </div>
      ),
    }));
  }

  render() {
    const { timezoneOptionsFormatter } = this.props;
    const options = timezoneOptionsFormatter ? timezoneOptionsFormatter(sortedTimezoneList) : this.options;
    return <CustomSelect name="timezone" options={options} {...this.props} />;
  }
}