import { CheckmarkDoneSuccessCorrect16BlueIcon } from '@cloudtower/icons-react';
import { cx } from '@linaria/core';
import Icon from '../Icon/index.js';
import LegacySelect from '../LegacySelect/index.js';
import { Typo } from '../Typo/index.js';
import useParrotTranslation from '../../hooks/useParrotTranslation.js';
import { Select, Tag } from 'antd';
import { uniqBy, groupBy, sortBy, toPairs } from 'lodash';
import React__default, { useState, useCallback, useEffect } from 'react';
import TimeZones from 'timezones.json';

const allTimeZones = uniqBy(TimeZones.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 = cx("E_o1ugr09p", Typo.Label.l3_regular);
const OptionFirstLineStyle = cx("E_o1ifxsq4", Typo.Label.l3_regular);
const OptionSecondLineStyle = cx("E_o1zue7", 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] = useState(value);
  const {
    t
  } = useParrotTranslation();
  const _onChange = useCallback(val => {
    setInnerValue(val);
    if (val === BrowserTimeValue) {
      onChange(browserTzName);
    } else {
      onChange(val);
    }
  }, [onChange]);
  useEffect(() => {
    if (defaultUseBrowserTime && !value) {
      setInnerValue(BrowserTimeValue);
      onChange(browserTzName);
    }
  }, []);
  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.createElement(Select.OptGroup, {
      label: key.toUpperCase()
    }, timezones.map(zone => {
      return /* @__PURE__ */React__default.createElement(Select.Option, {
        label: `${zone.value} (${getUTCOffsetText(zone.offset)})`,
        value: zone.value,
        className: OptionWrapperStyle
      }, /* @__PURE__ */React__default.createElement(TimeZoneOption, {
        key: zone.value,
        timeZone: zone
      }));
    }));
  });
  return /* @__PURE__ */React__default.createElement(LegacySelect, {
    className: cx(SelectStyle, className),
    dropdownClassName: DropdownStyle,
    placeholder: /* @__PURE__ */React__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.createElement(Select.Option, {
    value: BrowserTimeValue,
    label: `${t("components.browser_time_zone")} (${getUTCOffsetText(browserTz.offset)})`,
    className: OptionWrapperStyle
  }, /* @__PURE__ */React__default.createElement(TimeZoneOption, {
    key: BrowserTimeValue,
    customLabel: t("components.browser_time_zone"),
    timeZone: browserTz
  })), /* @__PURE__ */React__default.createElement(Select.Option, {
    value: "UTC",
    className: OptionWrapperStyle
  }, /* @__PURE__ */React__default.createElement(TimeZoneOption, {
    key: "utc",
    customLabel: t("components.coordinated_universal_time"),
    timeZone: {
      value: "UTC",
      text: "UTC",
      offset: 0,
      abbr: "GMT"
    }
  })), timeZoneOptionGroups, /* @__PURE__ */React__default.createElement(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.createElement(React__default.Fragment, null, /* @__PURE__ */React__default.createElement("div", {
    className: OptionFirstLineStyle
  }, /* @__PURE__ */React__default.createElement("span", {
    className: "timezone-title"
  }, customLabel || timeZone.value), /* @__PURE__ */React__default.createElement(Tag, {
    className: cx("timezone-tag", TagStyle)
  }, tagText)), /* @__PURE__ */React__default.createElement("div", {
    className: OptionSecondLineStyle
  }, /* @__PURE__ */React__default.createElement("span", null, timeZone.text, ", ", timeZone.abbr), /* @__PURE__ */React__default.createElement(Icon, {
    className: "selected-icon",
    src: CheckmarkDoneSuccessCorrect16BlueIcon,
    iconHeight: 16,
    iconWidth: 16
  })));
};
var TimeZoneSelect$1 = TimeZoneSelect;

export { TimeZoneSelect$1 as default };
