nice-app-web/src/entities/home/ui/favorite-wrapper.tsx

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';
import { useTranslation } from 'react-i18next';
import { showAlert } from '@/widgets/show-alert';
import { checkGrant } from '@/shared/lib/check-grant';

export interface FavoriteWrapperProps {
  usingType: 'home' | 'menu',
  editMode?: boolean,
  setEditMode?: (editMode: boolean) => void;
  changeMenuId?: string;
  setMenuOn?: (menuOn: boolean) => void;
};

export const FavoriteWrapper = ({
  usingType,
  editMode,
  setEditMode,
  changeMenuId,
  setMenuOn
}: FavoriteWrapperProps) => {
  const { navigate } = useNavigate();
  const { i18n, t } = useTranslation();
  
  const [favoriteItems, setFavoriteItems] = useState<Array<UserFavorite>>([]);
  
  const itemAdd: UserFavorite = {
    menuId: -1,
    menuName: t('favorite.edit'),
    menuNameEng: t('favorite.edit'),
    iconFilePath: IMAGE_ROOT + '/ico_menu_plus.svg',
    programPath: '',
  };
  
  const onClickToFavoriteEdit = () => {
    if(setEditMode){
      setEditMode(true);
    }
  };
  
  const onClickToNavigate = (menuId?: number, path?: string) => {
    if(menuId && checkGrant(menuId, 'R')){
      if(!!path){
        navigate(path);
        if(setMenuOn){
          setMenuOn(false);
        }
      }
    }
    else{
      showAlert(t('common.nopermission'));
    }
  };

  const getFavoriteList = () => {
    let userFavorite = useStore.getState().UserStore.userFavorite;
    setFavoriteItems(userFavorite);
  };

  const makeFavoriteItems = () => {
    let rs = [];
    for(let i=0;i<favoriteItems.length;i++){
      const displayName = i18n.language === 'en' && favoriteItems[i]?.menuNameEng
        ? favoriteItems[i]?.menuNameEng
        : favoriteItems[i]?.menuName;

      rs.push(
        <SwiperSlide key={ `favorite-slide-key-${i}` }>
          <div
            className="swiper-item"
            onClick={ () => !editMode && onClickToNavigate(favoriteItems[i]?.menuId, favoriteItems[i]?.programPath) }
          >
            <div className="swiper-icon coin-icon">
              <img
                src={ favoriteItems[i]?.iconFilePath || '' }
                alt={ displayName }
              />
            </div>
            <span className="swiper-text">{ displayName }</span>
          </div>
        </SwiperSlide>
      );
    }
    return rs;
  };
  const makeAddFavoriteItem = () => {
    let rs = [];
    if(!editMode && usingType === 'menu'){
      rs.push(
        <SwiperSlide key={ `favorite-item-add-slide-key` }>
          <div 
            className="swiper-item"
            onClick={ onClickToFavoriteEdit }
          >
            <div className="swiper-icon coin-icon">
              <img 
                src={ itemAdd.iconFilePath || '' } 
                alt={ itemAdd.menuName } 
              />
            </div>
            <span className="swiper-text">{ itemAdd.menuName }</span>
          </div>
        </SwiperSlide>
      );
    }
    
    return rs;
  };

  useEffect(() => {
    getFavoriteList();
  }, [changeMenuId]);

  return (
    <>
      <Swiper
        spaceBetween={ 9 }
        slidesPerView={ 4 }
        style={{height: ((usingType === 'home') && (favoriteItems.length < 1))? '0px': '75px'}}
      >
      { (favoriteItems.length > 0) && makeFavoriteItems() }
      { makeAddFavoriteItem() }
      </Swiper>
    </>
  );
};