import { useEffect, useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Pagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useHomeBannerListMutation } from '../api/use-home-banner-list-mutation';
import { 
  HomeBannerListParams,
  HomeBannerListResponse
} from '../model/types';

export const HomeBannerList = () => {

  const { mutateAsync: homeBannerList } = useHomeBannerListMutation();

  const [bannerList, setBannerList] = useState<Array<Record<string, any>>>([]);

  const callHomeBannerList = () => {
    let params: HomeBannerListParams = {};

    homeBannerList(params).then((rs: HomeBannerListResponse) => {
      console.log(rs);
      
    }).finally(() => {
      let items = [
        {title: '배너 이미지1', imageUrl: IMAGE_ROOT + '/sample_banner_0.png',  linkUrl: '', order: ''},
        {title: '배너 이미지2', imageUrl: IMAGE_ROOT + '/home-banner01.png', linkUrl: 'link2', order: ''},
        {title: '배너 이미지3', imageUrl: IMAGE_ROOT + '/home-banner01.png', linkUrl: '', order: ''},
      ];
      setBannerList(items);
    });
  };

  useEffect(() => {
    callHomeBannerList();
  }, []);

  const onClickToMove = (linkUrl?: string) => {
    if(!!linkUrl){
      alert('open :: ' + linkUrl);
    }
  };

  const swiperPagination = {
    bulletClass: 'banner-dot',
    bulletActiveClass: 'active',
    el: '.banner-pagination'
  };

  return (
    <>
      <div className="swiper-banner">
        <div className="banner-wrapper">
          <Swiper
            modules={[Pagination, Autoplay]}
            slidesPerView={1}
            pagination={ swiperPagination }
          >
          {
            bannerList.map((value, index) => (
              <SwiperSlide
                key={ `banner-swiper-key-${index}` }
              >
                <img 
                  src={ value.imageUrl } 
                  alt={ value.title }
                  style={{ 
                    objectFit: 'contain',
                    width: '100%',
                    height: '100%'
                  }}
                  onClick={ () => onClickToMove(value.linkUrl) }
                />
              </SwiperSlide>
            ))
          }
          </Swiper>
        </div>
        <div className="banner-pagination"></div>
      </div>  
    </>
  );
};