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

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

import { getMainCategoryDetail } from "../../actions/mainActions";
import TBody from "../../components/TBody/TBody";
import THeader from "../../components/THeader/THeader";
import TPanel from "../../components/TPanel/TPanel";
import css from "./ItemDetail.module.less";
import ItemImage from "./layout/ItemImage";
import OptionList from "./layout/OptionList";

export default function ItemDetail() {
  const [selectedPatnrId, setSelectedPatnrId] = useState(1);
  const [selectedPardtId, setSelectedPardtId] = useState("A523924");

  const [productData, setProductData] = useState();
  const data = useSelector((state) => state.main.productData);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(
      getMainCategoryDetail({
        patnrId: selectedPatnrId,
        prdtId: selectedPardtId,
      })
    );
  }, [dispatch]);

  useEffect(() => {
    setProductData(data);
    // console.log("#groupInfo", productData);
  }, [data, productData]);
  return (
    <TPanel isTabActivated={false}>
      <THeader
        className={css.header}
        title={productData?.prdtNm}
        onBackButton
      />
      <TBody className={css.container} scrollable={false}>
        <ItemImage productData={productData} />
        <OptionList />
      </TBody>
    </TPanel>
  );
}
