import React, { useMemo, useState } from "react";
import "../Company/company.css";
import { useGetCompanyList } from "../../../apis/Company";
import { Select } from "antd";

const companies = [
  {
    label: "RKD Holdings Limited",
    value: "RKD Holdings Limited",
  },
  {
    label: "Tourism Investement Fund Limited",
    value: "Tourism Investement Fund Limited",
  },
  {
    label: "Bandipur Cable Car & Tourism Limited",
    value: "Bandipur Cable Car & Tourism Limited",
  },
  {
    label: "Panchase Cable Car and Tours Limited",
    value: "Panchase Cable Car and Tours Limited",
  },
  {
    label: "Bizbazar Limited",
    value: "Bizbazar Limited",
  },
];
/**
 * Represents a CompanyList component for showing company details
 * @module CompanyList
 * @returns {JSX.Element} Returns a JSX code for showing company details
 */
const CompanyList = () => {
  /**
   * React state that holds company details
   * @constant {object} company
   *  @type {object}
   *  @default {{}}
   *  @memberof module:CompanyList
   */
  const [companyIndex, setCompanyIndex] = useState(0);
  /**
   * React state that holds loading status
   * @constant {boolean} isLoading
   * @type {boolean}
   * @default true
   * @memberof module:CompanyList
   */
  const [company, setCompany] = useState(companies[0].label);
  /**
   * React query hook for getting company list
   * @constant {function} useGetCompanyList
   * @memberof module:CompanyList
   * @inner
   */
  const { data: companyData, isLoading } = useGetCompanyList();
  /**
   * React hook for memoizing company list
   * @constant companyList
   * @memberof module:CompanyList
   * @type {T[]}
   */
  const companyList = useMemo(() => {
    let temp = companyData?.data?.data?.results || [];
    temp = temp.filter((result) => result.name === company);
    return temp;
  }, [companyData?.data, company]);

  /**
   * Function that handles next company
   * @memberof module:CompanyList
   * @inner
   * @function handleNext
   */
  const handleNext = () => {
    if (companyList.length == companyIndex + 1) {
      setCompanyIndex(0);
    } else {
      setCompanyIndex((prev) => prev + 1);
    }
  };

  if (isLoading) {
    return;
  }
  return (
    <>
      <div className="company_details__container">
        <div className="company_details__container_heading flex flex-column">
          <h2 className="main_title text-xl text-left">
            Company <span>List</span>
          </h2>
          <div className="company_selector w-100 ">
            <Select
              style={{ width: "100%" }}
              defaultValue="RKD Holdings Limited"
              className="report_company_selector parent_select "
              onChange={(value) => setCompany(value)}
              options={companies}
            />
          </div>
        </div>
        <div className="company_details__container_body mt-2">
          <div className="company_details_top flex ">
            <div className="company_logo_for_details">
              <img src={companyList[0]?.logo} alt="" />
            </div>
            <div className="company_details_public p-3 flex flex-column gap-2 text-xs">
              <div className="company_details_item">
                <div className="details-label mr-2 font-bold">
                  Company: &nbsp;
                  <span className="details-value">
                    {companyList[0]?.name || ""}
                  </span>
                </div>
              </div>
              <div className="company_details_item">
                <div className="details-label mr-2">
                  Sectors:&nbsp;
                  <span className="details-value">
                    {companyList[0]?.industry || ""}
                  </span>
                </div>
              </div>
              <div className="company_details_item">
                <div className="details-label">
                  Website: &nbsp;
                  <a
                    target="_blank"
                    href={companyList[0]?.website || ""}
                    className="details-value"
                  >
                    {companyList[0]?.website || ""}
                  </a>
                </div>
              </div>
              <div className="company_details_item">
                <div className="details-label mr-2">
                  Contact No. :&nbsp;
                  <span className="details-value">
                    {companyList[0]?.phone_number || ""}
                  </span>
                </div>
              </div>
              <div className="company_details_item">
                <div className="details-label mr-2">
                  Established:&nbsp;
                  <span className="details-value">
                    {companyList[0]?.founded_at_bs || ""}
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div className="company_details_bottom ">
            <div className="company_overview_title font-bold">
              Company overview
            </div>
            <div className="company_overview_title">
              {companyList[0]?.description || ""}
            </div>
          </div>
        </div>
        {/* <div id="carouselExampleIndicators" className="carousel slide" data-bs-ride="carousel">
  <div className="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" className="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div className="carousel-inner">
    <div className="carousel-item active">
      <img src={logo} className="d-block w-100" alt="..."/>
      <div className="carousel-caption d-none d-md-block">
        <h5>{companyList[companyIndex]?.name}</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div className="carousel-item">
      <img src={tifl} className="d-block w-100" alt="..."/>
      <div className="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div className="carousel-item">
      <img src={bizbazars} className="d-block w-100" alt="..."/>
    </div>
  </div>
  <button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span className="carousel-control-prev-icon" aria-hidden="true"></span>
    <span className="visually-hidden">Previous</span>
  </button>
  <button className="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span className="carousel-control-next-icon" aria-hidden="true"></span>
    <span className="visually-hidden">Next</span>
  </button>
</div> */}
      </div>
    </>
  );
};

export default CompanyList;