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';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import { Autoplay, Pagination } from 'swiper/modules';
import { useTranslation } from 'react-i18next';

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

  const [isFirstOpen, setIsFirstOpen] = useState<boolean>(false);
  const [currentSlide, setCurrentSlide] = useState<number>(1);

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

  const swiperPagination = {
    type: 'fraction',
    currentClass: 'current',
    totalClass: 'total',
    el: '.banner-page'
  };

  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">
          <Swiper
            modules={[Pagination, Autoplay]}
            slidesPerView={ 1 }
            pagination={{
              type: 'fraction',
              currentClass: 'current',
              totalClass: 'total',
              el: '.banner-page'
            }}
            style={{ height: '300px' }}
          >
            { bannerList.map((value, index) => (
                <SwiperSlide key={ `favorite-slide-key-${index}` }>
                  <img 
                    src={ value.imageUrl } 
                    alt={ value.title }
                    style={{ 
                      objectFit: 'contain',
                      width: '100%',
                      height: '100%'
                    }}
                  />
                </SwiperSlide>
              ))
            }
          </Swiper>
          <div 
            className="banner-page"
            style={{ 
              zIndex: 20,
              bottom: 'unset',
              top: '15px',
              left: 'unset',
              width: 'unset',
              color: 'var(--color-999999)'
            }}
          >
            <span className="current"></span>
            /
            <span className="total"></span>
          </div>
        </div>
        <div className="bottom-btn">
          <span onClick={ () => onClickToCloseDay() }>{t('home.banner.doNotShowToday')}</span>
          <span onClick={ () => onClickToClose() }>{t('home.banner.close')}</span>
        </div>
      </motion.div>
    </>
  );
};