import { APP_LANGUAGE } from "@/entities/common/model/constant";
import { AppLanguage } from "@/entities/common/model/types";
import { IMAGE_ROOT } from "@/shared/constants/common";
import { useTranslation } from "react-i18next";

export interface ServiceLanguageBottomSheetProps {
  serviceLanguageBottomSheetOn: boolean;
  setServiceLanguageBottomSheetOn: (serviceLanguageBottomSheetOn: boolean) => void;
  appLanguage: AppLanguage;
  setAppLanguage: (appLanguage: AppLanguage) => void;
  changeLanguage: (language: string) => void | Promise<void>;
};

export const ServiceLanguageBottomSheet = ({
  serviceLanguageBottomSheetOn: _serviceLanguageBottomSheetOn,
  setServiceLanguageBottomSheetOn,
  appLanguage,
  setAppLanguage,
  changeLanguage
}: ServiceLanguageBottomSheetProps) => {
  const { t } = useTranslation();

  const onClickToClose = () => {
    setServiceLanguageBottomSheetOn(false);
  };
  const onChangeServiceLanguage = (language: AppLanguage) => {
    if (appLanguage !== language) {
      setAppLanguage(language);
      changeLanguage(language);
    }
    onClickToClose();
  };

  return (
    <>
      <div className="bg-dim"></div>
      <div className="bottomsheet">
        <div className="bottomsheet-header">
          <div className="bottomsheet-title">
            <h2>{t('settings.serviceLanguage.title')}</h2>
            <button
              className="close-btn"
              type="button"
            >
              <img
                src={ IMAGE_ROOT + '/ico_close.svg' }
                alt={t('common.close')}
                onClick={ onClickToClose }
              />
            </button>
          </div>
        </div>

        <div className="bottomsheet-content">
          <div className="bottom-section">
            <p className="fs16">{t('settings.serviceLanguage.notice')}</p>
            <ul className="list-style-circle link">
              <li 
                className={ `${(appLanguage === AppLanguage.KO)? 'selected': ''}` }
                onClick={ () => onChangeServiceLanguage(AppLanguage.KO) }
              >{ APP_LANGUAGE[AppLanguage.KO] }</li>
              <li 
                className={ `${(appLanguage === AppLanguage.EN)? 'selected': ''}` }
                onClick={ () => onChangeServiceLanguage(AppLanguage.EN) 
              }>{ APP_LANGUAGE[AppLanguage.EN] }</li>
            </ul>
          </div>
        </div>
      </div>
    </>
  );
};