import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from "react";
import PropTypes from "prop-types";
import cx from "classnames";
import Typography from "../Typography";
import Popover from "../Popover";
import ChevronDown from "../Icon/ChevronDown";
import enFlag from "./flags/gb";
import esFlag from "./flags/es";
import ptFlag from "./flags/pt";
import frFlag from "./flags/fr";
import thFlag from "./flags/th";
import nlFlag from "./flags/nl";
import trFlag from "./flags/tr";
import itFlag from "./flags/it";
import ruFlag from "./flags/ru";
import viFlag from "./flags/vi";
import deFlag from "./flags/de";
import zhFlag from "./flags/cn";
import hiFlag from "./flags/in";
import getClasses from "./styles";
export var AVAILABLE_LANGUAGES = ["en", "es", "pt", "fr", "th", "nl", "tr", "it", "ru", "vi", "de", "zh", "hi"];
var COUNTRIES = {
  en: {
    name: "English",
    flag: enFlag
  },
  es: {
    name: "Español",
    flag: esFlag
  },
  pt: {
    name: "Português",
    flag: ptFlag
  },
  fr: {
    name: "Français",
    flag: frFlag
  },
  th: {
    name: "ไทย",
    flag: thFlag
  },
  nl: {
    name: "Nederlands",
    flag: nlFlag
  },
  tr: {
    name: "Türkçe",
    flag: trFlag
  },
  it: {
    name: "Italiano",
    flag: itFlag
  },
  ru: {
    name: "русский",
    flag: ruFlag
  },
  vi: {
    name: "Tiếng Việt",
    flag: viFlag
  },
  de: {
    name: "Deutsch",
    flag: deFlag
  },
  zh: {
    name: "中文 (Zhōngwén)",
    flag: zhFlag
  },
  hi: {
    name: "हिन्दी",
    flag: hiFlag
  }
};
var LanguageSelector = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var languages = props.languages,
      defaultLanguage = props.defaultLanguage,
      onChange = props.onChange;
  var classes = getClasses();

  var _useState = useState(defaultLanguage || languages[0]),
      _useState2 = _slicedToArray(_useState, 2),
      selected = _useState2[0],
      setSelected = _useState2[1];

  var _useState3 = useState(null),
      _useState4 = _slicedToArray(_useState3, 2),
      anchorEl = _useState4[0],
      setAnchorEl = _useState4[1];

  var SelectedFlag = COUNTRIES[selected].flag;

  var handleSelect = function handleSelect(language) {
    setSelected(language);
    setAnchorEl(null);
    onChange(language);
  };

  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
    ref: ref,
    type: "button",
    onClick: function onClick(ev) {
      return setAnchorEl(ev.currentTarget);
    },
    className: classes.triggerButton
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.flag
  }, /*#__PURE__*/React.createElement(SelectedFlag, null)), /*#__PURE__*/React.createElement(Typography, {
    variant: "inputText",
    shade: 800
  }, COUNTRIES[selected].name), /*#__PURE__*/React.createElement(ChevronDown, {
    color: "primary",
    className: cx(_defineProperty({}, classes.chevronOpen, Boolean(anchorEl)))
  })), /*#__PURE__*/React.createElement(Popover, {
    id: "language-selector-popover",
    open: Boolean(anchorEl),
    anchorEl: anchorEl,
    onClose: function onClose() {
      return setAnchorEl(null);
    }
  }, /*#__PURE__*/React.createElement("ul", {
    className: classes.list
  }, languages.map(function (lang) {
    var LangFlag = COUNTRIES[lang].flag;
    return /*#__PURE__*/React.createElement("li", {
      key: "language-".concat(lang)
    }, /*#__PURE__*/React.createElement("button", {
      type: "button",
      onClick: function onClick() {
        return handleSelect(lang);
      },
      className: classes.listItem
    }, /*#__PURE__*/React.createElement("div", {
      className: classes.flag
    }, /*#__PURE__*/React.createElement(LangFlag, null)), /*#__PURE__*/React.createElement(Typography, {
      variant: "inputText",
      shade: 800,
      weight: selected === lang ? "semibold" : "normal"
    }, COUNTRIES[lang].name)));
  }))));
});
LanguageSelector.propTypes = {
  languages: PropTypes.arrayOf(PropTypes.oneOf(AVAILABLE_LANGUAGES)).isRequired,
  defaultLanguage: PropTypes.oneOf(AVAILABLE_LANGUAGES),
  onChange: PropTypes.func
};
export default LanguageSelector;