import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useStore } from '@/shared/model/store';
import { motion } from 'framer-motion';
import { ChangeEvent, useState } from 'react';
import { toPng } from 'html-to-image';
import { snackBar } from '@/shared/lib';
import { useTranslation } from 'react-i18next';

export interface EmailBottomSheetProps {
  bottomSheetOn: boolean;
  setBottomSheetOn: (bottomSheetOn: boolean) => void;
  imageSave: boolean;
  sendEmail: boolean;
  sendRequest: (email?: string) => void;
};

export const EmailBottomSheet = ({
  bottomSheetOn,
  setBottomSheetOn,
  imageSave,
  sendEmail,
  sendRequest
}: EmailBottomSheetProps) => {
  const { t } = useTranslation();
  const optionsEmails = useStore.getState().UserStore.selectOptionsEmails;
  const email = useStore.getState().UserStore.email;
  const [userEmail, setUserEmail] = useState<string>(email);
  const onClickToClose = () => {
    setBottomSheetOn(false);
  };

  const onClickToRequest = () => {
    snackBar('정상 요청 되었습니다.', function(){
      onClickToClose();
    }, 2000);
    // sendRequest(userEmail);
  };
  
  const downloadImage = () => {
    const app = document.getElementById('root') as HTMLElement;
    toPng(app).then((image) => {
      const link = document.createElement('a');
      link.download = 'downloadImage.png';
      link.href = image;
      link.click();
      snackBar(t('common.imageRequested'));
    });
  };
  const onDownloadImage = () => {
    downloadImage();
    setTimeout(() => {
      onClickToClose();
    }, 2000);
  };
  
  return (
    <>
      { (bottomSheetOn) &&
        <div className="bg-dim"></div>
      }
      <motion.div 
        className="bottomsheet"
        initial="hidden"
        animate={ (bottomSheetOn)? 'visible': 'hidden' }
        variants={ BottomSheetMotionVaiants }
        transition={ BottomSheetMotionDuration }
      >
        <div className="bottomsheet-header">
          <div className="bottomsheet-title">
            <h2>{t('common.selectEmailAddress')}</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="email-section">
            { !!imageSave &&
            <div
              className="email-label mb-10"
              onClick={ onDownloadImage }
            >
              <div className="mail-icon">
                <div className="mail-icon-bg"></div>
                <img
                  src={ IMAGE_ROOT + '/ico_pic.svg' }
                  alt={t('common.image')}
                />
              </div>
              <span className="label-text">{t('common.imageSave')}</span>
            </div>
            }
            { !!sendEmail &&
            <>
              <div className="email-label">
                <div className="mail-icon">
                  <div className="mail-icon-bg"></div>
                  <img
                    src={ IMAGE_ROOT + '/ico_email.svg' }
                    alt={t('common.mail')}
                  />
                </div>
                <span className="label-text">{t('common.receiveByEmail')}</span>
              </div>
              { optionsEmails && optionsEmails.length > 0 &&
                <div className="email-select">
                  <div className="select-wrapper">
                    <select
                      value={ userEmail }
                      onChange={ (e: ChangeEvent<HTMLSelectElement>) => setUserEmail(e.target.value) }
                    >
                      {
                        optionsEmails.map((value, index) => (
                          <option 
                            key={ value.value }
                            value={ value.value }
                          >{ value.value }</option>
                        ))
                      }
                    </select>
                  </div>
                </div>
              }
              { (!optionsEmails || optionsEmails.length === 0) &&
                <div className="error-message">
                  <p>등록된 메일 정보가 없습니다.<br />이메일 인증정보를 사용자관리 메뉴에서 추가 후 신청하세요.</p>
                </div>
              }
            </>
            }
            
          </div>
        </div>

        <div className="bottomsheet-footer">
          <button
            className="btn-50 btn-blue flex-1"
            type="button"
            onClick={ onClickToRequest }
          >{t('common.request')}</button>
        </div>
      </motion.div>
    </>
  );
};