import { jsx as _jsx } from "react/jsx-runtime";
import { useState, useMemo } from "react";
import styled from "styled-components";
import Dropdown from "../dropdown";
import { B14 } from "../typography";
export const DEFAULT_LANGS = [
    { code: "en", label: "EN" },
    { code: "zh", label: "中文" },
];
const DropDownWrapper = styled(Dropdown) `
  .ui-dropdown__content {
    top: 46px;
    right: unset;
  }
`;
const LangsList = styled.div `
  border-radius: 2px;

  background: ${({ theme }) => theme.new?.langs?.itemBackground ?? "unset"};
  box-shadow: ${({ theme }) => theme.new?.langs?.shadow ?? "unset"};
  overflow: hidden;

  .lang-item {
    cursor: pointer;
    height: 36px;
    display: flex;
    align-items: center;
    padding-left: 22px;
    padding-right: 24px;
    border-left: 2px solid transparent;
    white-space: nowrap;

    &.active {
      border-left-color: ${({ theme }) => theme.new?.langs?.activeColor ?? "unset"};
      color: ${({ theme }) => theme.new?.langs?.activeColor ?? "unset"};
      background: ${({ theme }) => theme.new?.langs?.activeItemBackground ?? "unset"};
    }
  }

  .lang-item:hover {
    border-left-color: ${({ theme }) => theme.new?.langs?.activeColor ?? "unset"};
    color: ${({ theme }) => theme.new?.langs?.activeColor ?? "unset"};
  }
`;
const Langs = ({ items = DEFAULT_LANGS, className, selected, handleSelectLang, }) => {
    const [opened, setOpened] = useState(false);
    const selectedLabel = useMemo(() => {
        const lang = items.find((el) => el.code === selected)?.label;
        if (!lang) {
            console.error("Langs component expected en, zh as lang but received ", selected);
            return "en";
        }
        return lang;
    }, [items, selected]);
    return (_jsx(DropDownWrapper, { className: className, label: _jsx(B14, { className: "lang-item selected", children: selectedLabel }), opened: opened, onClick: () => setOpened((prev) => !prev), handleClickOutside: () => setOpened(false), children: _jsx(LangsList, { children: items.map(({ code, label }) => (_jsx(B14, { className: `lang-item${code === selected ? " active" : ""}`, as: "div", onClick: () => {
                    handleSelectLang(code);
                    setOpened(false);
                }, children: label }, code))) }) }));
};
export default Langs;
//# sourceMappingURL=langs.js.map