{"version":3,"file":"a806b14a-72997b63329f6bcef0f8.js","mappings":"8NAYO,MAAMA,EAA8BC,IAAoB,IAADC,EAAA,IAAlB,UAAEC,GAAWF,EACvD,MAAM,KAAEG,IAASC,EAAAA,EAAAA,MACXC,EAASC,EAAaC,EAAAA,IACtB,EAACC,EAAgB,EAACC,IAAsBC,EAAAA,EAAAA,WAAS,GAEjDC,EAAcC,IACdJ,GACW,OAATI,GACFC,EAAAA,EAAAA,UAAS,MAETA,EAAAA,EAAAA,UAAU,IAAGD,MAEfH,GAAmB,KAEnBP,IACa,OAATU,GACFC,EAAAA,EAAAA,UAAS,MAETA,EAAAA,EAAAA,UAAU,IAAGD,MAEfE,YAAW,IAAMX,EAAKY,eAAeH,IAAO,KAC9C,EAGII,EAAeA,KAEjBC,EAAAA,EAAAA,IAAA,OAAKC,IAAKb,EAAOc,wBACfF,EAAAA,EAAAA,IAAA,OAAKC,IAAKb,EAAOe,mBACfH,EAAAA,EAAAA,IAAA,OAAKC,IAAKb,EAAOgB,wBACfJ,EAAAA,EAAAA,IAAA,QACEK,QAASA,IAAMX,EAAW,MAC1BO,IAAG,CACDb,EAAOkB,aACW,OAAlBpB,EAAKqB,SAAoBnB,EAAOoB,aAAe,GAAE,QAEpD,QAIHR,EAAAA,EAAAA,IAAA,OAAKC,IAAKb,EAAOgB,wBACfJ,EAAAA,EAAAA,IAAA,QACEK,QAASA,IAAMX,EAAW,MAC1BO,IAAG,CACDb,EAAOkB,aACW,OAAlBpB,EAAKqB,SAAoBnB,EAAOoB,aAAe,GAAE,QAEpD,QAIHR,EAAAA,EAAAA,IAAA,OAAKC,IAAKb,EAAOgB,wBACfJ,EAAAA,EAAAA,IAAA,QACEK,QAASA,IAAMX,EAAW,MAC1BO,IAAG,CACDb,EAAOkB,aACW,OAAlBpB,EAAKqB,SAAoBnB,EAAOoB,aAAe,GAAE,QAEpD,SAeX,OACER,EAAAA,EAAAA,IAAA,OAAKC,IAAKb,EAAOqB,YACfT,EAAAA,EAAAA,IAAA,OACEU,YAAaA,IAAMlB,GAAmB,GACtCa,QAASA,IAAMb,GAAoBD,GACnCU,IAAKb,EAAOuB,UAEZX,EAAAA,EAAAA,IAAA,OAAKC,IAAKb,EAAOwB,oBACfZ,EAAAA,EAAAA,IAAA,OAAKC,IAAKb,EAAOO,MAC6B,QADxBX,EAdqB,CACjD6B,GAAI,KACJC,GAAI,KACJC,GAAI,MAYqB7B,EAAKqB,iBAAsB,IAAAvB,EAAAA,EAAI,OAElDgB,EAAAA,EAAAA,IAACgB,EAAAA,EAAiB,OAEnBzB,GAAmBQ,MAEtBC,EAAAA,EAAAA,IAAA,OAAKC,IAAKb,EAAO6B,aAAclB,KAC3B,EAET,IAAAmB,EAAA,CAAAC,KAAA,SAAA/B,OAAA,qBAAAgC,EAAA,CAAAD,KAAA,SAAA/B,OAAA,+CAAAiC,EAAA,CAAAF,KAAA,UAAA/B,OAAA,qEAED,MAAMC,EAAgBC,IACb,CACLmB,UAASY,EAMTV,SAASV,EAAAA,EAAAA,IAAG,gBAERX,EAAMgC,GAAGC,UAAS,gCAItBN,aAAahB,EAAAA,EAAAA,IAAG,oBAEZX,EAAMgC,GAAGC,UAAS,4BAItBX,kBAAiBQ,EAKjBzB,MAAMM,EAAAA,EAAAA,IAAG,SACEX,EAAMkC,OAAOC,QAAO,+BAG/BvB,uBAAuBD,EAAAA,EAAAA,IAAG,kDAGJX,EAAMkC,OAAOE,MAAK,IACpCpC,EAAMgC,GAAGC,UAAS,oEAMtBpB,kBAAkBF,EAAAA,EAAAA,IAAG,oEAIVX,EAAMkC,OAAOC,QAAO,cAE/BrB,sBAAqBc,EAGrBZ,cAAcL,EAAAA,EAAAA,IAAG,gCAGJX,EAAMkC,OAAOG,YAAW,oCAIrCnB,cAAcP,EAAAA,EAAAA,IAAG,6FAQCX,EAAMkC,OAAOG,YAAW,kC","sources":["webpack://aldagram-corporate/./src/ui/molecules/LangSwitchButton.tsx"],"sourcesContent":["import { FC, useState } from 'react'\nimport KeyboardArrowDown from '@ui/atoms/icons/KeyboardArrowDown'\nimport { useTranslation } from 'react-i18next'\nimport { css } from '@emotion/react'\nimport { MyTheme, theme } from '@ui/styles/theme'\nimport { navigate } from 'gatsby'\nimport { Languages } from '@/types/languages'\n\ntype Props = {\n  closeMenu: () => void\n}\n\nexport const LangSwitchButton: FC<Props> = ({ closeMenu }) => {\n  const { i18n } = useTranslation()\n  const styles = createStyles(theme)\n  const [isPcSwitchShown, setIsPcSwitchShown] = useState(false)\n\n  const changeLang = (lang: string) => {\n    if (isPcSwitchShown) {\n      if (lang === 'ja') {\n        navigate('/')\n      } else {\n        navigate(`/${lang}/`)\n      }\n      setIsPcSwitchShown(false)\n    } else {\n      closeMenu()\n      if (lang === 'ja') {\n        navigate('/')\n      } else {\n        navigate(`/${lang}/`)\n      }\n      setTimeout(() => i18n.changeLanguage(lang), 300)\n    }\n  }\n\n  const switchButton = () => {\n    return (\n      <div css={styles.switchButtonContainer}>\n        <div css={styles.switchButtonLang}>\n          <div css={styles.langSelectorContainer}>\n            <span\n              onClick={() => changeLang('ja')}\n              css={[\n                styles.langSelector,\n                i18n.language === 'ja' ? styles.langSelected : ''\n              ]}\n            >\n              JP\n            </span>\n          </div>\n          <div css={styles.langSelectorContainer}>\n            <span\n              onClick={() => changeLang('en')}\n              css={[\n                styles.langSelector,\n                i18n.language === 'en' ? styles.langSelected : ''\n              ]}\n            >\n              EN\n            </span>\n          </div>\n          <div css={styles.langSelectorContainer}>\n            <span\n              onClick={() => changeLang('th')}\n              css={[\n                styles.langSelector,\n                i18n.language === 'th' ? styles.langSelected : ''\n              ]}\n            >\n              TH\n            </span>\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  const languageToLabel: Record<Languages, string> = {\n    ja: 'JP',\n    en: 'EN',\n    th: 'TH'\n  }\n\n  return (\n    <div css={styles.container}>\n      <div\n        onMouseOver={() => setIsPcSwitchShown(true)}\n        onClick={() => setIsPcSwitchShown(!isPcSwitchShown)}\n        css={styles.desktop}\n      >\n        <div css={styles.menuItemContainer}>\n          <div css={styles.lang}>\n            {languageToLabel[i18n.language as Languages] ?? 'EN'}\n          </div>\n          <KeyboardArrowDown />\n        </div>\n        {isPcSwitchShown && switchButton()}\n      </div>\n      <div css={styles.spAndTablet}>{switchButton()}</div>\n    </div>\n  )\n}\n\nconst createStyles = (theme: MyTheme) => {\n  return {\n    container: css`\n      display: flex;\n      flex-direction: column;\n      align-items: end;\n      cursor: pointer;\n    `,\n    desktop: css`\n      display: none;\n      ${theme.mq.isDesktop} {\n        display: contents;\n      }\n    `,\n    spAndTablet: css`\n      display: contents;\n      ${theme.mq.isDesktop} {\n        display: none;\n      }\n    `,\n    menuItemContainer: css`\n      display: flex;\n      align-items: center;\n      height: 26px;\n    `,\n    lang: css`\n      color: ${theme.colors.primary};\n      margin-right: 4px;\n    `,\n    switchButtonContainer: css`\n      width: 100px;\n      border-radius: 2px;\n      background-color: ${theme.colors.white};\n      ${theme.mq.isDesktop} {\n        position: absolute;\n        margin-right: -36px;\n        margin-top: 50px;\n      }\n    `,\n    switchButtonLang: css`\n      display: flex;\n      justify-content: space-evenly;\n      padding: 14px 0px;\n      color: ${theme.colors.primary};\n    `,\n    langSelectorContainer: css`\n      position: relative;\n    `,\n    langSelector: css`\n      &:hover {\n        cursor: pointer;\n        color: ${theme.colors.primaryDark};\n        text-decoration: none;\n      }\n    `,\n    langSelected: css`\n      &::after {\n        content: '';\n        position: absolute;\n        left: 0;\n        bottom: -4px;\n        width: 100%;\n        height: 3px;\n        background: ${theme.colors.primaryDark};\n        border-radius: 1px;\n      }\n    `\n  }\n}\n"],"names":["LangSwitchButton","_ref4","_languageToLabel","closeMenu","i18n","useTranslation","styles","createStyles","theme","isPcSwitchShown","setIsPcSwitchShown","useState","changeLang","lang","navigate","setTimeout","changeLanguage","switchButton","___EmotionJSX","css","switchButtonContainer","switchButtonLang","langSelectorContainer","onClick","langSelector","language","langSelected","container","onMouseOver","desktop","menuItemContainer","ja","en","th","KeyboardArrowDown","spAndTablet","_ref","name","_ref2","_ref3","mq","isDesktop","colors","primary","white","primaryDark"],"sourceRoot":""}