import { useEffect, useState } from 'react';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { UserFavorite } from '@/entities/user/model/types';
import { useStore } from '@/shared/model/store';

/*
const items: Array<UserFavorite> = [
  {img: IMAGE_ROOT + '/ico_menu_01.svg', title: '지급대행'},
  {img: IMAGE_ROOT + '/ico_menu_02.svg', title: '거래내역조회'},
  {img: IMAGE_ROOT + '/ico_menu_03.svg', title: '정산달력'},
  {img: IMAGE_ROOT + '/ico_menu_02.svg', title: '거래내역조회'},
  {img: IMAGE_ROOT + '/ico_menu_03.svg', title: '정산달력'}
];
*/
export interface FavoriteWrapperProps {
  usingType: 'home' | 'menu'
};

export const FavoriteWrapper = ({
  usingType
}: FavoriteWrapperProps) => {
  const { navigate } = useNavigate();

  const [edit, setEdit] = useState<boolean>(false);
  const [favoriteItems, setFavoriteItems] = useState<Array<UserFavorite>>([]);
  

  const itemAdd: UserFavorite = {
    img: IMAGE_ROOT + '/ico_menu_plus.svg',
    title: '편집하기'
  };
  
  const onClickToFavoriteEdit = () => {
    setEdit(true);
  };

  //useSetFavoriteEdit(true);
  //useSetMenuOn(true);

  const onClickToNavigate = (path?: string) => {
    if(!!path){
      navigate(path);
    }
  };

  const getFavoriteItems = () => {
    let rs = [];
    for(let i=0;i<favoriteItems.length;i++){
      rs.push(
        <SwiperSlide key={ `favorite-slide-key-${i}` }>
          <div 
            className="swiper-item"
            onClick={ () => onClickToNavigate(favoriteItems[i]?.path) } 
          >
            <div className="swiper-icon coin-icon">
              <img 
                src={ favoriteItems[i]?.img } 
                alt={ favoriteItems[i]?.title } 
              />
            </div>
            <span className="swiper-text">{ favoriteItems[i]?.title }</span>
          </div>
        </SwiperSlide>
      );
    }
    
    rs.push(
      <SwiperSlide key={ `favorite-item-add-slide-key` }>
        <div 
          className="swiper-item"
          onClick={ onClickToFavoriteEdit }
        >
          <div className="swiper-icon coin-icon">
            <img 
              src={ itemAdd.img } 
              alt={ itemAdd.title } 
            />
          </div>
          <span className="swiper-text">{ itemAdd.title }</span>
        </div>
      </SwiperSlide>
    );
    
    return rs;
  };

  return (
    <>
      <Swiper 
        spaceBetween={ 9 }
        slidesPerView={ 4 }
      >{ getFavoriteItems() }</Swiper>
    </>
  );
};
