import moment from 'moment';
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 { motion } from 'framer-motion';

export const HomeBottomBanner = ({
  setBottomBannerOn,
  bottomBannerOn
}: HomeBottomBannerProps) => {
  const { navigate } = useNavigate();

  const onClickToClose = () => {
    // close
    setBottomBannerOn(false);
  };
  const onClickToCloseDay = () => {
    // 오늘 날짜 기록
    const today = moment().format('YYYYMMDD');
    setLocalStorage(StorageKeys.BottomBannerClose, today);
    onClickToClose();
  };

  const variants = {
    hidden: { y: '100%' },
    visible: { y: '0%' },
  };

  return (
    <>
      {bottomBannerOn &&
        <div className="bg-dim"></div>
      }
      <motion.div 
        className="bottomsheet banner"
        initial="hidden"
        animate={ (bottomBannerOn)? 'visible': 'hidden' }
        variants={ variants }
        transition={{ duration: 0.5 }}
      >
        <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>
    </>
  );
};
