"use client";
import { ListGroup } from "react-bootstrap";
import styles from "@/styles/Component/Dashboard/DashboardNav.module.scss";
import { formatDate } from "@/utils/helpers";
import { SuspenseLoader } from "@/components/App/Loader";
import useFetchData from "@/components/App/useFetchData";
import { useEffect, useState } from "react";

interface MemberProfileProps {
  account_number: string;
  created_at: string;
  status: boolean;
  nature: {
    title: string;
  };
  pause_unpause_status: boolean;
  permanent_distribution_member: number;
  business_name: string;
  landline_number: string;
  mobile_number: string;
  business_address: string;
  second_mobile_number: string;
  business_address_line_two: string;
  business_district_code: string;
  business_post_code: string;
  business_area_code: string;
  email: string;
  area_code_full?: {
    name?: string;
  };
  person_significate_control: string;
  company_name: string;
  company_address: string;
  company_number: string;
  company_address_line_two: string;
  company_vat_number: string;
  company_post_code: string;
  additional_information: string;
  leads_recepiant_email_address: string;
  message_recepiant_mobile_number: string;
  psc_dob: string;
  psc_nin_number: string;
  psc_home_address: string;
  psc_home_address_line_two: string;
  psc_post_code: string;
  psc_mobile_number: string;
  directors: {
    id: string;
    name: string;
    address: string;
    dob: string;
    address_line_two: string;
    nin_number: string;
    post_code: string;
    director_name: string;
    director_address: string;
    director_dob: string;
    director_address_line_two: string;
    director_nin_number: string;
    director_post_code: string;
  }[];
}

function MemberProfile() {
  const [hydrated, setHydrated] = useState(false);

  useEffect(() => {
    setHydrated(true);
  }, []);
  const { data, isLoading } = useFetchData<MemberProfileProps>("GET_PROFILE");


  if (!hydrated) return null;

  if (isLoading) return <SuspenseLoader />;

  //Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used

  return (
    <div className={styles.MemberProfileBlock}>
      <h1>Member Profile</h1>
      <div className="carCardInfoDashboard mb-5">
        <div className="carCardInfoHead">
          <h4 className="text-center font-weight-800 title-color  m-0">
            Account Details
          </h4>
        </div>
        <div className="carCardInfoList">
          <ListGroup as="ul">
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Account Number</span>
              {data?.account_number ?? "-"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Date of Opening </span>
              {formatDate(data?.created_at) ?? "-"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Account Status</span>
              {data?.pause_unpause_status ? "Paused" : "Un-Paused"}
            </ListGroup.Item>
            {/* <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Date of Active</span>
              21-05-2016
            </ListGroup.Item> */}
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Account Nature</span>
              {data?.nature?.title ?? "-"}
            </ListGroup.Item>
            {/* <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Date of Open</span>
              {formatDate(data?.created_at)}
            </ListGroup.Item> */}
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Leads Status </span>{" "}
              {data?.status ? "Active" : "In Active"}
            </ListGroup.Item>
            {/* <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Date of Pause</span>
              10-01-2018
            </ListGroup.Item> */}
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Member Status</span>
              {data?.permanent_distribution_member == 0 ? "Standard" : "Golden"}
            </ListGroup.Item>
            {/* <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Date of Status</span>
              20-06-2019
            </ListGroup.Item> */}
          </ListGroup>
        </div>
      </div>

      <div className="carCardInfoDashboard mb-5">
        <div className="carCardInfoHead">
          <h4 className="text-center font-weight-800 title-color  m-0">
            Trading Details
          </h4>
        </div>
        <div className="carCardInfoList">
          <ListGroup as="ul">
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Trading name</span>
              {data?.business_name ?? "-"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Landline</span>
              {data?.landline_number ?? "-"}
            </ListGroup.Item>
            {/* <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Name (PSC)</span>
              {data?.person_significate_control ?? "-"}
            </ListGroup.Item> */}
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Mobile 1</span>
              {data?.mobile_number ?? "-"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Address</span>
              {data?.business_address ?? "-"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Mobile 2</span>
              {data?.second_mobile_number ?? "-"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Address Line 2</span>
              {data?.business_address_line_two ?? "-"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">District </span>{" "}
              {data?.business_district_code ?? "-"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Post Code</span>
              {data?.business_post_code ?? "-"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Area Code</span>
              {data?.business_area_code ?? "-"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Email</span>
              {data?.email ?? "-"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Area Name</span>
              {data?.area_code_full?.name ?? "-"}
            </ListGroup.Item>
          </ListGroup>
        </div>
      </div>


      <div className="carCardInfoDashboard mb-5">
        <div className="carCardInfoHead">
          <h4 className="text-center font-weight-800 title-color  m-0">
            Lead Recepiant Details
          </h4>
        </div>
        <div className="carCardInfoList">
          <ListGroup as="ul">
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Lead Recepiant Email Address	</span>
              {data?.leads_recepiant_email_address ?? "-"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Message Recipient Mobile Number</span>
              {data?.message_recepiant_mobile_number ?? "-"}
            </ListGroup.Item>
          </ListGroup>
        </div>
      </div>


      <div className="carCardInfoDashboard mb-5">
        <div className="carCardInfoHead">
          <h4 className="text-center font-weight-800 title-color  m-0">
            PSC Details
          </h4>
        </div>
        <div className="carCardInfoList">
          <ListGroup as="ul">
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">PSC Name</span>
              {data?.person_significate_control ?? "-"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
                <span className="carCardInfoListTitle">DOB</span>
                {formatDate(data?.psc_dob) ?? "-"}
            </ListGroup.Item>


            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">NIN Number</span>
              {data?.psc_nin_number ?? "-"}
            </ListGroup.Item>



            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">PSC Address</span>
              {data?.psc_home_address ?? "-"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">PSC Address Line 2</span>
              {data?.psc_home_address_line_two ?? "-"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">PSC Post Code</span>
              {data?.psc_post_code ?? "-"}
            </ListGroup.Item>

            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Mobile Number</span>
              {data?.psc_mobile_number ?? "-"}
            </ListGroup.Item>
          </ListGroup>
        </div>
      </div>

      <div className="carCardInfoDashboard mb-5">
        <div className="carCardInfoHead">
          <h4 className="text-center font-weight-800 title-color  m-0">
            Limited Company Details
          </h4>
        </div>
        <div className="carCardInfoList">
          <ListGroup as="ul">
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Name </span>
              {data?.company_name ?? "-"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Address</span>
              {data?.company_address ?? "-"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Number </span>
              {data?.company_number ?? "-"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Address</span>
              {data?.company_address_line_two ?? "-"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">VAT number.</span>
              {data?.company_vat_number ?? "-"}
            </ListGroup.Item>
            <ListGroup.Item as="li">
              <span className="carCardInfoListTitle">Post Code</span>
              {data?.company_post_code ?? "-"}
            </ListGroup.Item>
          </ListGroup>
        </div>
      </div>

      {/* {data?.additional_information != null ? (
        <>
          <div className="carCardInfoDashboard mb-5">
            <div className="carCardInfoHead">
              <h4 className="text-center font-weight-800 title-color  m-0">
                Additional Information
              </h4>
            </div>
            <div className="carCardInfoList">
              <p>{data?.additional_information}</p>
            </div>
          </div>
        </>
      ) : (
        ""
      )} */}

      {Array.isArray(data?.directors)
        ? data?.directors?.map((data, index) => (
          <div className="carCardInfoDashboard mb-5" key={data?.id}>
            <div className="carCardInfoHead">
              <h4 className="text-center font-weight-800 title-color m-0">
                Director {index + 1} Details
              </h4>
            </div>
            <div className="carCardInfoList">
              <ListGroup as="ul">
                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Name</span>
                  {data?.director_name ?? "-"}
                </ListGroup.Item>
                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Address</span>
                  {data?.director_address ?? "-"}
                </ListGroup.Item>
                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">DOB</span>
                  {formatDate(data?.director_dob) ?? "-"}
                </ListGroup.Item>
                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Address</span>
                  {data?.director_address_line_two}
                </ListGroup.Item>
                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">NIN Number</span>
                  {data?.director_nin_number ?? "-"}
                </ListGroup.Item>
                <ListGroup.Item as="li">
                  <span className="carCardInfoListTitle">Post Code</span>
                  {data?.director_post_code ?? "-"}
                </ListGroup.Item>
              </ListGroup>
            </div>
          </div>
        ))
        : null}
    </div>
  );
}

export default MemberProfile;