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

import {
  getBrandLayoutInfo,
  getBrandList,
  getBrandLiveChannelInfo,
} from "../../api/featuredBrands";
import TPanel from "../../components/TPanel/TPanel";
import Banner from "./Banner/Banner";
import css from "./FeaturedBrandsPanel.module.less";
import QuickMenu from "./QuickMenu/QuickMenu";

/* 

key, value and dataType of BrandList 

expsOrd: 1 / number
logoImgAlt: "qvc" / string
logoImgNm: "us_qvc.png" / string
logoImgPath: "http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/us_qvc.png" / string
newFlag: "N" / string
patncLogoPath: "http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png" / string
patncNm: "QVC" / string
patnrId: "1" / string

*/

export default function FeaturedBrandsPanel() {
  // @@ Todo, provided by GNB as props or global state
  const [brandList, setBrandList] = useState([]);

  // @@ Todo, provided by GNB as props or global state
  const [selectedBrandId, setSelectedBrandId] = useState("1");

  const [selectedBrandInfo, setSelectedBrandInfo] = useState({});
  const [topImgInfo, setTopImgInfo] = useState({});

  const handleQuickMenu = (patnrId) => {
    const brandInfo = brandList.find((brand) => brand.patnrId === patnrId);
    setSelectedBrandInfo(brandInfo);
    setSelectedBrandId(patnrId);
  };

  const fetchBrandList = async () => {
    try {
      const data = await getBrandList();
      console.log("Brand List:", data);
      if (data) {
        setBrandList(data.brandList);
        setSelectedBrandInfo(() =>
          data.brandList.find(({ patnrId }) => patnrId === selectedBrandId)
        );
      }
    } catch (error) {
      console.error("Error fetching Brand List:", error);
    }
  };

  const fetchBrandLayoutInfo = async (patnrId) => {
    try {
      const data = await getBrandLayoutInfo({ patnrId });
      console.log("Brand Layout Info:", data);
      if (data) {
        setTopImgInfo(data.topImgInfo);
      }
    } catch (error) {
      console.error("Error fetching Brand Layout Info:", error);
    }
  };

  const fetchBrandLiveChannelInfo = async (patnrId) => {
    try {
      const data = await getBrandLiveChannelInfo({ patnrId });
      console.log("Brand Live Channel Info:", data);
      if (data) {
      }
    } catch (error) {
      console.error("Error fetching Brand Live Channel Info:", error);
    }
  };

  useEffect(() => {
    // @@ Todo, provided by GNB as props or global state
    setSelectedBrandId("1");
    fetchBrandList();
  }, []);

  useEffect(() => {
    fetchBrandLayoutInfo(selectedBrandId);
    fetchBrandLiveChannelInfo(selectedBrandId);
  }, [selectedBrandId]);

  return (
    /* scenario page 98 */
    <TPanel className={css.container}>
      {brandList && brandList.length > 1 && (
        <QuickMenu
          brandList={brandList}
          onQuickMenuClick={handleQuickMenu}
          selectedBrandId={selectedBrandId}
        />
      )}

      <Banner selectedBrandInfo={selectedBrandInfo} topImgInfo={topImgInfo} />
    </TPanel>
  );
}
