import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import Layout from "@/components/layouts/Layout";
import BusinessAddress from "@/components/ui/form/BusinessAddress";
import AccessorialFeesUpload from "@/components/ui/form/AccessorialFeesUpload";
import BillingAddress from "@/components/ui/form/BillingAddress";
import ContactNames from "@/components/ui/form/ContactNames";
import FuelSurchargeUpload from "@/components/ui/form/FuelSurchargeUpload";
import LogoUpload from "@/components/ui/form/LogoUpload";
import CustomerPersonalDetails from "@/components/ui/form/CustomerPersonalDetails";
import CarrierPersonalDetails from "@/components/ui/form/CarrierPersonalDetails";
import CarrierDetails from "@/components/ui/form/CarrierDetails";
import ProtectedRoute from "@/ProtectedRoute";
import UsersInfoDetails from "@/components/ui/form/UsersInfoDetails";
import { useSession } from "next-auth/react";
import useAuthProvider from "@/useAuthProvider";
import { convertCamelCaseToWords } from "@/helpers/projectHelper";
import { useCollapsed } from "@/components/Context/CollapsedContext"; 
import AdminChangesPassword from "@/components/ui/form/AdminChangesPassword";

function TabButton({ tabName, activeTab, onClick, label }) {
  return (
    <li className="nav-item" role="presentation">
      <button
        hidden={label === "" ? true : false}
        className={`nav-link nav-link-button ${activeTab === tabName ? "active" : ""}`}
        onClick={() => onClick(tabName)}
      >
        {convertCamelCaseToWords(label)}
      </button>
    </li>
  );
}

function MyProfile(): JSX.Element {
  const { data } = useSession();
  const { Permission: userData } = useAuthProvider();
  const router = useRouter();
  const userCarrier = data?.user?.group_type === "carriers";
  const userAdmin = data?.user?.group_type === "super_admin";
  const isCustomerGroup = data?.user?.group_type === "customers";
  const { isCollapsed } = useCollapsed(); 

  const { tab } = router.query;
  const tabnav = tab === "FuelSurchargeUpload" ? "FuelSurchargeUpload" : "";
  const [activeTab, setActiveTab] = useState<string>(tabnav);
  const handleTabClick = (tabName: string) => {
    setActiveTab(tabName);
  };

  const renderTabsForUser = () => {
    if (userCarrier) {
      return UserArrScope(userData, data);

    } else if (isCustomerGroup) {
      return userArrScope1(userData, data);
    } else if (userAdmin) {
      return adminScope();
    } else {
      return [];
    }
  };

  const tabsToRender = renderTabsForUser();

  useEffect(() => {
    const firstNonEmptyTab = tabsToRender?.find(key => key !== "");
    if (userData) {

      setActiveTab(tabnav ? tabnav : firstNonEmptyTab);

    }

  }, [userData]);

  useEffect(()=>{
    if (userAdmin) {
      setActiveTab('UpdatePassword');
    }
  },[])
  
  return (
    <>
      {jsxContent(tabsToRender, activeTab, handleTabClick, isCollapsed)}
    </>
  );
}

export default ProtectedRoute(MyProfile);

function jsxContent(tabsToRender: string[], activeTab: string, handleTabClick: (tabName: string) => void, isCollapsed: any) {
  return <Layout>
    <div className={` ${isCollapsed ? 'collapsed-body-profile' : 'content-body'}`}>
      <section id="dashboard-profile-page">
        <div className="dashboard-body-wrap">
          <div className="tab-btn-block my-2">
            <ul className="nav nav-pills">
              {tabsToRender?.map((tabName) => (
                <TabButton
                  key={tabName}
                  tabName={tabName}
                  activeTab={activeTab}
                  onClick={handleTabClick}
                  label={tabName} 
                  />
              ))}
            </ul>
          </div>
          {jsxDiv(tabsToRender, activeTab)}
        </div>
      </section>
    </div>
  </Layout>;
}

function jsxDiv(tabsToRender: string[], activeTab: string) {
  return divChild(tabsToRender, activeTab);
}

function divChild(tabsToRender: string[], activeTab: string) {
  return <div>
    {tabsToRender.every(name => name === "") && <p style={{ marginTop: "16px", textAlign: 'center', fontSize: "20px" }}>Requires Advance permissions, Please contact your admin</p>}
    {activeTab === "BillingAddress" && <BillingAddress />}
    {activeTab === "BusinessAddress" && <BusinessAddress />}
    {activeTab === "CarrierDetails" && <CarrierDetails />}
    {activeTab === "PersonalDetails" && <CarrierPersonalDetails />}
    {activeTab === "PersonalDetail" && <CustomerPersonalDetails />}
    {activeTab === "AccessorialFeesUpload" && (
      <AccessorialFeesUpload />
    )}
    {activeTab === "ContactNames" && <ContactNames keys={0} />}
    {activeTab === "FuelSurchargeUpload" && <FuelSurchargeUpload />}
    {activeTab === "LogoUpload" && <LogoUpload />}
    {activeTab === "AccountUsers" && <UsersInfoDetails />}
    {activeTab === "UpdatePassword" && <AdminChangesPassword />}
  </div>;
}

function adminScope() {
  return ["UpdatePassword","LogoUpload","FuelSurchargeUpload"];
}

function userArrScope1(userData: undefined, data) {
  return [
    userData?.ProfileBillingAddressView ? "BillingAddress" : "",
    userData?.ViewBusinessAddresstab ? "BusinessAddress" : "",
    userData?.ViewPersonalDetailstab ? "PersonalDetail" : "",
    userData?.ViewAccessorialFeestab ? "AccessorialFeesUpload" : "",
    userData?.ViewFuelSurchargeUpload ? "FuelSurchargeUpload" : "",
    userData?.EditLogoUploadTab ? "LogoUpload" : "",
    data?.user?.parent_id === null ? "AccountUsers" : "",
  ];
}

function UserArrScope(userData: undefined, data) {
  return [
    userData?.ProfileBillingAddressView ? "BillingAddress" : "",
    userData?.ViewBusinessAddresstab ? "BusinessAddress" : "",
    userData?.ViewCarrierDetailstab ? "CarrierDetails" : "",
    userData?.ViewPersonalDetailstab ? "PersonalDetails" : "",
    userData?.ViewAccessorialFeestab ? "AccessorialFeesUpload" : "",
    userData?.ViewContactNamestab ? "ContactNames" : "",
    userData?.ViewFuelSurchargeUpload ? "FuelSurchargeUpload" : "",
    userData?.EditLogoUploadTab ? "LogoUpload" : "",
    data?.user?.parent_id === null ? "AccountUsers" : "",
  ];
}