shoptime/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx

import React, { useCallback, useEffect, useState } from "react";

import { useDispatch, useSelector } from "react-redux";

import Spotlight from "@enact/spotlight";

import {
  getThemeCurationDetailInfo,
  getThemeHotelDetailInfo,
} from "../../actions/homeActions";
import { getMainCategoryDetail } from "../../actions/mainActions";
import { popPanel } from "../../actions/panelActions";
import { getProductGroup } from "../../actions/productActions";
import TBody from "../../components/TBody/TBody";
import THeader from "../../components/THeader/THeader";
import TPanel from "../../components/TPanel/TPanel";
import css from "./DetailPanel.module.less";
import GroupProduct from "./GroupProduct/GroupProduct";
import SingleProduct from "./SingleProduct/SingleProduct";
import ThemeProduct from "./ThemeProduct/ThemeProduct";
import UnableProduct from "./UnableProduct/UnableProduct";
import YouMayLike from "./YouMayLike/YouMayLike";

export default function ItemDetail() {
  const [selectedPatnrId, setSelectedPatnrId] = useState("");
  const [selectedPrdtId, setSelectedPrtdId] = useState("");
  const [selectedCurationId, setSelectedCurationId] = useState("");
  const [themeType, setThemeType] = useState("");
  const [selectedIndex, setSelectedIndex] = useState(0);

  const productData = useSelector((state) => state.main.productData);
  const themeData = useSelector((state) => state.home.productData);
  const panels = useSelector((state) => state.panels.panels);
  const hotelData = useSelector((state) => state.home.hotelData);
  const productInfo = useSelector(
    (state) => state.home.themeCurationDetailInfoData
  );
  const { httpHeader } = useSelector((state) => state.common);

  const dispatch = useDispatch();

  const getPanelInfo = () => {
    if (panels) {
      for (let i = 0; i < panels.length; i++) {
        if (panels[i].name === "detailpanel") {
          setSelectedPatnrId(panels[i].panelInfo.patnrId);
          setSelectedPrtdId(panels[i].panelInfo.prdtId);
          if (panels[0].name == "hotpickpanel") {
            setSelectedPatnrId(panels[i].panelInfo.patnrId);
            setSelectedCurationId(panels[i].panelInfo.curationId);
            setThemeType(panels[i].panelInfo.type);
          }
        }
      }
    }
  };

  useEffect(() => {
    getPanelInfo();

    if (themeType === "hotel") {
      dispatch(
        getThemeHotelDetailInfo({
          patnrId: selectedPatnrId,
          curationId: selectedCurationId,
        })
      );
    }

    if (themeType === "theme") {
      dispatch(
        getThemeCurationDetailInfo({
          patnrId: selectedPatnrId,
          curationId: selectedCurationId,
        })
      );
    }

    if (selectedPrdtId) {
      dispatch(
        getMainCategoryDetail({
          patnrId: selectedPatnrId,
          prdtId: selectedPrdtId,
        })
      );

      dispatch(
        getProductGroup({
          patnrId: selectedPatnrId,
          prdtId: selectedPrdtId,
        })
      );
    }
  }, [dispatch, selectedPatnrId, selectedPrdtId, panels]);

  const onClick = useCallback(() => {
    dispatch(popPanel());
  }, [dispatch]);

  const saveToLocalStorage = useCallback(() => {
    const recentItmes =
      JSON.parse(window.localStorage.getItem("recentItems")) || [];

    const currentDate = new Date();

    const formattedDate = `${
      currentDate.getMonth() + 1
    }/${currentDate.getDate()}`;

    const existingProductIndex = recentItmes.findIndex((item) => {
      return item.prdtId === selectedPrdtId;
    });

    if (existingProductIndex !== -1) {
      recentItmes.splice(existingProductIndex, 1);
    }

    recentItmes.push({
      prdtId: selectedPrdtId,
      patnrId: selectedPatnrId,
      date: formattedDate,
      cntryCd: httpHeader["X-Device-Country"],
    });

    if (recentItmes.length >= 51) {
      const data = [...recentItmes];
      window.localStorage.setItem("recentItems", JSON.stringify(data.slice(1)));
    } else {
      window.localStorage.setItem("recentItems", JSON.stringify(recentItmes));
    }
  }, [panels, selectedPatnrId, selectedPatnrId, httpHeader]);

  useEffect(() => {
    if (panels && selectedPatnrId && selectedPrdtId) {
      saveToLocalStorage();
    }
  }, [selectedPatnrId, selectedPrdtId]);

  return (
    <TPanel isTabActivated={false}>
      <THeader
        className={css.header}
        title={
          (selectedPrdtId && productData?.prdtNm) ||
          (themeType === "hotel" && hotelData?.hotelInfo.curationNm) ||
          (themeType === "theme" && themeData?.themeInfo[0]?.curationNm)
        }
        onBackButton
        onClick={onClick}
      />
      <TBody className={css.tbody} scrollable={false}>
        {/* 단일상품 영역  */}
        {productData?.pmtSuptYn === "Y" &&
          productData?.grPrdtProcYn === "N" &&
          selectedPrdtId && (
            <SingleProduct
              selectedPatnrId={selectedPatnrId}
              selectedPrdtId={selectedPrdtId}
              selectedIndex={selectedIndex}
              setSelectedIndex={setSelectedIndex}
            />
          )}
        {/* 그룹상품 영역 */}
        {productData?.pmtSuptYn === "Y" &&
          productData?.grPrdtProcYn === "Y" && (
            <GroupProduct
              selectedPatnrId={selectedPatnrId}
              selectedPrdtId={selectedPrdtId}
              selectedIndex={selectedIndex}
              setSelectedIndex={setSelectedIndex}
            />
          )}
        {/* 구매불가상품 영역 */}
        {productData?.pmtSuptYn === "N" && selectedPrdtId && (
          <UnableProduct
            selectedPatnrId={selectedPatnrId}
            selectedPrdtId={selectedPrdtId}
            selectedIndex={selectedIndex}
            setSelectedIndex={setSelectedIndex}
          />
        )}

        {/* 테마그룹상품 영역*/}
        {selectedCurationId && (
          <ThemeProduct
            selectedIndex={selectedIndex}
            setSelectedIndex={setSelectedIndex}
            selectedCurationId={selectedCurationId}
            selectedPatnrId={selectedPatnrId}
            themeType={themeType}
          />
        )}
      </TBody>
      {(selectedPrdtId || themeType === "theme") && (
        <YouMayLike isUnable={productData?.pmtSuptYn === "N"} />
      )}
    </TPanel>
  );
}