import  { useState, useEffect } from "react";
import CompanyList from "./Company/CompanyList";
import Equity from "../../sections/Home/Section7/Components/Equity";
import Investment from "../../sections/Home/Section7/Components/Investment";
import Promoters from "../../sections/Home/Section7/Components/Promoters";
import Corporate from "../../sections/Home/Section7/Components/Corporate";
import Private from "../../sections/Home/Section7/Components/Private";
import "../Dashboard/dashboard.css";
import BarChart from "../../component/BarChart/BarChart";
import RecentshareopeningsList from "./RecentOpenings/RecentOpenings";
import { Select } from "antd";
const tabs = [
  { label: "Investment Structure", value: "INVESTMENT STRUCTURE" },
  { label: "Equity Structure ", value: "EQUITY STRUCT" },
  { label: "Promoters Structure", value: "PROMOTERS STRUCTURE" },
  { label: "Corporate Structure", value: "CORPORATE STRUCTURE" },
  {
    label: "Privates Group Investment Plan",
    value: "PRIVATES GROUP INVESTMENT PLAN",
  },
];
/**
 * Component for displaying the default dashboard.
 * @module DefaultDashboard
 * @param user
 * @param userroles
 * @return {JSX.Element|null}
 */
const DefaultDashboard = ({ user, userroles }) => {
  /**
   * react state that stores the current tab value.
   * @type {string}
   * @default tabs[0].value
   * @memberof module:DefaultDashboard
   * @name structure
   */
  const [structure, setStructure] = useState(tabs[0].value);
  /**
   * react state that stores the loading state.
   * @type {boolean}
   * @default true
   * @memberof module:DefaultDashboard
   * @name isLoading
   */
  const [isLoading, setIsLoading] = useState(true);
  // console.log("The user roles in default dashboard", userroles);

  useEffect(() => {
    if (user) {
      setIsLoading(false);
    }
  }, [userroles?.is_shareholder]);
  /**
   * Function to get the content of the investment portfolio.
   * @memberof module:DefaultDashboard
   * @function getInvestmentPortfolioContent
   * @return {JSX.Element} Returns the content of the investment portfolio.
   */
  const getInvestmentPortfolioContent = () => {
    switch (structure) {
      case tabs[1].value:
        return <Equity />;
      case tabs[2].value:
        return <Promoters />;
      case tabs[3].value:
        return <Corporate />;
      case tabs[4].value:
        return <Private />;
      default:
        return <Investment />;
    }
  };
  /**
   * Function to get the layout of the chart.
   * @memberof module:DefaultDashboard
   * @function getChartLayout
   * @param {boolean} is_shareholder - Boolean indicating whether the user is a shareholder.
   */
  const getChartLayout = (is_shareholder) => {
    switch (is_shareholder) {
      case true:
        return <BarChart />;
      case false:
        return (
          <div className="default_dashboard_container_card_1">
            <div className="dashboard_col1_first_row">
              <CompanyList />
            </div>
            <div className="dashboard_col1_second_row">
              <div className="dashboard_col1_second_row_heading">
                <h2 className="main_title text-xl">
                  Equity <span>Structure</span>{" "}
                </h2>
              </div>
              <div className="equity_chart">
                <div className="investment_selector w-100 ">
                  <Select
                    style={{ width: "100%" }}
                    defaultValue={tabs[0].value}
                    className="report_company_selector parent_select "
                    onChange={(value) => setStructure(value)}
                    options={tabs}
                  />
                </div>

                {getInvestmentPortfolioContent()}
              </div>
            </div>
          </div>
        );
      default:
        return;
    }
  };

  if (isLoading) {
    return null;
  }
  return (
    <div className="default_dashboard_container">
      {getChartLayout(userroles?.is_shareholder)}
      <div className="main_container__row3 relative">
        <div className="main_container__row3_heading">
          <h2 className="main-title">
            Recent Share <span> Openings</span>{" "}
          </h2>
        </div>
        {/* <h1 className="company_name font-[600] text-lg">Company </h1> */}
        <RecentshareopeningsList userroles={userroles} />
      </div>
    </div>
  );
};

export default DefaultDashboard;