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';

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 optionsEmails = useStore.getState().UserStore.selectOptionsEmails;
  const email = useStore.getState().UserStore.email;
  const [userEmail, setUserEmail] = useState<string>(email);
  const onClickToClose = () => {
    setBottomSheetOn(false);
  };

  const onClickToRequest = () => {
    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('이미지가 요청 되었습니다.');
    });
  };
  const onDownloadImage = () => {
    downloadImage();
    setTimeout(() => {
      onClickToClose();
    }, 1000);
  };
  
  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>이메일 주소를 선택하세요</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="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="이미지"
                />
              </div>
              <span className="label-text">이미지 저장</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='메일'
                  />
                </div>
                <span className="label-text">메일로 받기</span>
              </div>
              <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>
              {/*
              <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 }
          >신청</button>
        </div>
      </motion.div>
    </>
  );
};