import { AppLanguage } from "@/entities/common/model/types";
import { IMAGE_ROOT } from "@/shared/constants/common";

export interface ServiceLanguageBottomSheetProps {
  serviceLanguageBottomSheetOn: boolean;
  setServiceLanguageBottomSheetOn: (serviceLanguageBottomSheetOn: boolean) => void;
  appLanguage: AppLanguage;
  setAppLanguage: (appLanguage: AppLanguage) => void;
};

export const ServiceLanguageBottomSheet = ({
  serviceLanguageBottomSheetOn,
  setServiceLanguageBottomSheetOn,
  appLanguage,
  setAppLanguage
}: ServiceLanguageBottomSheetProps) => {

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

  return (
    <>
      <div className="bg-dim"></div>
      <div className="bottomsheet">
        <div className="bottomsheet-header">
          <div className="bottomsheet-title">
            <h2>서비스 언어를 선택하세요.</h2>
            <button 
              className="close-btn" 
              type="button"
            >
              <img 
                src={ IMAGE_ROOT + '/ico_close.svg' }
                alt="닫기"
                onClick={ onClickToClose }
              />
            </button>
          </div>
        </div>

        <div className="bottomsheet-content">
          <div className="bottom-section">
            <p className="fs16">※ 미지원 언어일 경우 ENGLISH 자동 설정</p>
            <ul className="list-style-circle link">
              <li
                className={ `${(appLanguage === AppLanguage.DEVICE)? 'selected': ''}` }
                onClick={ () => onChangeServiceLanguage(AppLanguage.DEVICE) }
              >기기 설정 언어</li>
              <li 
                className={ `${(appLanguage === AppLanguage.KO)? 'selected': ''}` }
                onClick={ () => onChangeServiceLanguage(AppLanguage.KO) }
              >한국어</li>
              <li 
                className={ `${(appLanguage === AppLanguage.EN)? 'selected': ''}` }
                onClick={ () => onChangeServiceLanguage(AppLanguage.EN) 
              }>ENGLISH</li>
            </ul>
          </div>
        </div>
      </div>
    </>
  );
};