'use strict';

var iconsReact = require('@cloudtower/icons-react');
var core = require('@linaria/core');
var index$2 = require('../Icon/index.js');
var index$1 = require('../LegacySelect/index.js');
var index = require('../Typo/index.js');
var useParrotTranslation = require('../../hooks/useParrotTranslation.js');
var antd = require('antd');
var _ = require('lodash');
var React = require('react');
var TimeZones = require('timezones.json');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var TimeZones__default = /*#__PURE__*/_interopDefault(TimeZones);

const allTimeZones = _.uniqBy(TimeZones__default.default.reduce((sum, zone) => {
  const utcZones = zone.utc.map(utc => {
    return {
      abbr: zone.abbr,
      text: zone.text.replace(/\(.*\) /, ""),
      value: utc,
      offset: zone.offset
    };
  });
  return sum.concat(utcZones);
}, []), "value");
const timeZoneGroups = (() => {
  const groupedTimeZones = _.groupBy(allTimeZones, tz => tz.value.split("/")[0]);
  delete groupedTimeZones["CST6CDT"];
  delete groupedTimeZones["MST7MDT"];
  delete groupedTimeZones["PST8PDT"];
  delete groupedTimeZones["Etc"];
  return _.sortBy(_.toPairs(groupedTimeZones).map(([key, tzs]) => {
    return [key, _.sortBy(tzs, "value")];
  }), "0");
})();
const SelectStyle = "E_s1dni7lo";
const DropdownStyle = "E_d1wwmmm5";
const OptionWrapperStyle = core.cx("E_o1ugr09p", index.Typo.Label.l3_regular);
const OptionFirstLineStyle = core.cx("E_o1ifxsq4", index.Typo.Label.l3_regular);
const OptionSecondLineStyle = core.cx("E_o1zue7", index.Typo.Label.l4_regular);
const TagStyle = "E_tyfmlxg";
const OptionPlaceholder = "E_o18uybox";
const BrowserTimeValue = "browser_time_zone";
const browserTzName = Intl.DateTimeFormat().resolvedOptions().timeZone;
const browserTz = allTimeZones.find(tz => tz.value === browserTzName) || allTimeZones[0];
const TimeZoneSelect = props => {
  const {
    value,
    onChange,
    disabled,
    defaultUseBrowserTime,
    className,
    placeholder
  } = props;
  const [innerValue, setInnerValue] = React.useState(value);
  const {
    t
  } = useParrotTranslation();
  const _onChange = React.useCallback(val => {
    setInnerValue(val);
    if (val === BrowserTimeValue) {
      onChange(browserTzName);
    } else {
      onChange(val);
    }
  }, [onChange]);
  React.useEffect(() => {
    if (defaultUseBrowserTime && !value) {
      setInnerValue(BrowserTimeValue);
      onChange(browserTzName);
    }
  }, []);
  React.useEffect(() => {
    if (innerValue === BrowserTimeValue && value === browserTzName) return;
    if (innerValue === value) return;
    setInnerValue(value);
  }, [innerValue, value]);
  const timeZoneOptionGroups = timeZoneGroups.map(([key, timezones]) => {
    return /* @__PURE__ */React__default.default.createElement(antd.Select.OptGroup, {
      label: key.toUpperCase()
    }, timezones.map(zone => {
      return /* @__PURE__ */React__default.default.createElement(antd.Select.Option, {
        label: `${zone.value} (${getUTCOffsetText(zone.offset)})`,
        value: zone.value,
        className: OptionWrapperStyle
      }, /* @__PURE__ */React__default.default.createElement(TimeZoneOption, {
        key: zone.value,
        timeZone: zone
      }));
    }));
  });
  return /* @__PURE__ */React__default.default.createElement(index$1, {
    className: core.cx(SelectStyle, className),
    dropdownClassName: DropdownStyle,
    placeholder: /* @__PURE__ */React__default.default.createElement("span", null, placeholder || t("components.time_zone_select_placeholder")),
    value: innerValue,
    onChange: _onChange,
    showSearch: true,
    disabled,
    filterOption: (keyword, option) => {
      const hasSome = allTimeZones.some(tz => tz.value.toLowerCase().includes(keyword.toLowerCase()));
      if (!hasSome) return false;
      if ((option == null ? void 0 : option.value) === "_placeholder_") {
        return true;
      }
      return ((option == null ? void 0 : option.value) || "").toLowerCase().includes(keyword.toLowerCase());
    },
    optionLabelProp: "label",
    input: {}
  }, /* @__PURE__ */React__default.default.createElement(antd.Select.Option, {
    value: BrowserTimeValue,
    label: `${t("components.browser_time_zone")} (${getUTCOffsetText(browserTz.offset)})`,
    className: OptionWrapperStyle
  }, /* @__PURE__ */React__default.default.createElement(TimeZoneOption, {
    key: BrowserTimeValue,
    customLabel: t("components.browser_time_zone"),
    timeZone: browserTz
  })), /* @__PURE__ */React__default.default.createElement(antd.Select.Option, {
    value: "UTC",
    className: OptionWrapperStyle
  }, /* @__PURE__ */React__default.default.createElement(TimeZoneOption, {
    key: "utc",
    customLabel: t("components.coordinated_universal_time"),
    timeZone: {
      value: "UTC",
      text: "UTC",
      offset: 0,
      abbr: "GMT"
    }
  })), timeZoneOptionGroups, /* @__PURE__ */React__default.default.createElement(antd.Select.Option, {
    value: "_placeholder_",
    className: OptionPlaceholder
  }, "_placeholder_"));
};
function getUTCOffsetText(offset) {
  if (offset === 0) {
    return "UTC";
  } else if (offset < 0) {
    return `UTC${offset}:00`;
  } else {
    return `UTC+${offset}:00`;
  }
}
const TimeZoneOption = ({
  timeZone,
  customLabel
}) => {
  let tagText = getUTCOffsetText(timeZone.offset);
  return /* @__PURE__ */React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */React__default.default.createElement("div", {
    className: OptionFirstLineStyle
  }, /* @__PURE__ */React__default.default.createElement("span", {
    className: "timezone-title"
  }, customLabel || timeZone.value), /* @__PURE__ */React__default.default.createElement(antd.Tag, {
    className: core.cx("timezone-tag", TagStyle)
  }, tagText)), /* @__PURE__ */React__default.default.createElement("div", {
    className: OptionSecondLineStyle
  }, /* @__PURE__ */React__default.default.createElement("span", null, timeZone.text, ", ", timeZone.abbr), /* @__PURE__ */React__default.default.createElement(index$2, {
    className: "selected-icon",
    src: iconsReact.CheckmarkDoneSuccessCorrect16BlueIcon,
    iconHeight: 16,
    iconWidth: 16
  })));
};
var TimeZoneSelect$1 = TimeZoneSelect;

module.exports = TimeZoneSelect$1;
