import moment from 'moment';
import { motion } from 'framer-motion';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { StorageKeys } from '@/shared/constants/local-storage';
import { setLocalStorage } from '@/shared/lib/web-view-bridge';
import { HomeBottomBannerProps } from '../model/types';
import { useStore } from '@/shared/model/store';
import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
import { useEffect, useState } from 'react';

export const HomeBottomBanner = ({
  setBottomBannerOn,
  bottomBannerOn
}: HomeBottomBannerProps) => {
  const { navigate } = useNavigate();
  
  const [isFirstOpen, setIsFirstOpen] = useState<boolean>(false);

  const onClickToClose = () => {
    setBottomBannerOn(false);
    useStore.getState().BannerStore.setBannerInfo({
      HomneBottomBanner: true
    });
  };
  const onClickToCloseDay = () => {
    // 오늘 날짜 기록
    const today = moment().format('YYYYMMDD');
    setLocalStorage(StorageKeys.BottomBannerClose, today);
    onClickToClose();
  };

  useEffect(() => {
    let bannerInfo = useStore.getState().BannerStore.bannerInfo;
    if(!!bannerInfo.HomneBottomBanner){
      setIsFirstOpen(false);
    }
    else{
      setIsFirstOpen(true);
    }
  }, [bottomBannerOn]);


  return (
    <>
      {bottomBannerOn && isFirstOpen &&
        <div className="bg-dim"></div>
      }
      <motion.div 
        className="bottomsheet banner"
        initial="hidden"
        animate={ (bottomBannerOn && isFirstOpen)? 'visible': 'hidden' }
        variants={ BottomSheetMotionVaiants }
        transition={ BottomSheetMotionDuration }
      >
        <div className="bottomsheet-content">
          <img 
            src={ IMAGE_ROOT + '/sample_banner.png' }
            alt="배너"
          />
          <div className="banner-page">
            <span className="current">1</span>
            /
            <span className="total">3</span>
          </div>
        </div>
        <div className="bottom-btn">
          <span onClick={ () => onClickToCloseDay() }>오늘 하루 보지 않기</span>
          <span onClick={ () => onClickToClose() }>닫기</span>
        </div>
      </motion.div>
    </>
  );
};
