import React from "react";
import JDmodal from "../../atoms/modal/Modal";
import LangList from "./LangList";

import {
  LanguageShortResverse,
  LANGUAGE_LIST,
  LanguageResverseShort
} from "../../types/enum";
import { IUseModal } from "../../hooks/hook";

type IProps = {
  modalHook: IUseModal;
  changeLang: any;
  currentLang: any;
}

const LangSelectModal: React.FC<IProps> = ({currentLang, changeLang, modalHook }) => {
  const enableLangs = ["KOREAN", "ENGLISH"];
  return (
    <JDmodal {...modalHook}>
      <LangList
        onClickLng={lang => {
          changeLang(LanguageResverseShort[lang]);
        }}
        // @ts-ignore
        hilightLangs={[LanguageShortResverse[currentLang]]}
        hideList={LANGUAGE_LIST.filter(lang => !enableLangs.includes(lang))}
      />
    </JDmodal>
  );
};

export default LangSelectModal;