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

import TButtonTab, {
  LIST_TYPE,
} from "../../../components/TButtonTab/TButtonTab";
import { LOG_MENU } from "../../../utils/Config";
import { $L } from "../../../utils/helperMethods";
import css from "./ImageSideContents.module.less";
import ListEmptyContents from "./ListEmptyContents/ListEmptyContents";
import RoomThemeList from "./RoomThemeList/RoomThemeList";
import ShopNowProductList from "./ShopNowProductList/ShopNowProductList";

const tabList = [$L("SHOP NOW"), $L("ROOM THEME")];

const ImageSideContents = ({
  otherRoomThemeInfos,
  handleSelectedTab,
  selectedRoomThemeInfo,
  setSelectedThemeExpsOrd,
}) => {
  const [tabIndex, setTabIndex] = useState(0);

  const { roomThemeProducts } = selectedRoomThemeInfo;

  useEffect(() => {
    if (handleSelectedTab) {
      const nowMenu =
        tabIndex === 0
          ? LOG_MENU.SHOW_ROOM_SHOP_NOW
          : LOG_MENU.SHOW_ROOM_ROOM_THEME;

      handleSelectedTab(nowMenu);
    }
  }, [tabIndex, handleSelectedTab]);

  const handleItemClick = useCallback(
    ({ index }) => {
      if (index !== tabIndex) setTabIndex(index);
    },
    [tabIndex]
  );

  return (
    <div className={css.container}>
      <TButtonTab
        contents={tabList}
        className={css.tButtonTab}
        listType={LIST_TYPE.small}
        onItemClick={handleItemClick}
        selectedIndex={tabIndex}
      />

      {tabIndex === 0 ? (
        roomThemeProducts.length > 0 ? (
          <ShopNowProductList selectedRoomThemeInfo={selectedRoomThemeInfo} />
        ) : (
          <ListEmptyContents tabIndex={tabIndex} />
        )
      ) : otherRoomThemeInfos.length > 0 ? (
        <RoomThemeList
          otherRoomThemeInfos={otherRoomThemeInfos}
          setSelectedThemeExpsOrd={setSelectedThemeExpsOrd}
        />
      ) : (
        <ListEmptyContents tabIndex={tabIndex} />
      )}
    </div>
  );
};

export default memo(ImageSideContents);
