import React, { useEffect, useState, useRef } from "react";
import Layout from "@/components/layouts/Layout";
import { Row, Col, Modal, Button, FormLabel } from "react-bootstrap";
import GeneralInformation from "@/components/ui/carriers/General-Information";
import ContactInformation from "@/components/ui/carriers/Contact-Information";
import MarketsTerminal from "@/components/ui/carriers/MarketsTerminal";
import { getServerSession } from "next-auth/next";
import { authOptions } from "../api/auth/[...nextauth]";
import { ScaleLoader } from "react-spinners";
import Image from "next/image";
import logo from "../../public/images/perso.jpeg";
import {
  getcarrierbyid,
  CustomerAddToMyFavroutes,
  CustomerRemoveBlock,
  getLogo,
  getId,
} from "@/services/public";
import { useRouter } from "next/router";
import { useSession } from "next-auth/react";
import { ToastContainer, toast } from "react-toastify";
import useAuthProvider from "@/useAuthProvider";
import { useCollapsed } from "@/components/Context/CollapsedContext"; 

interface ServerSideProps {
  session: any;
  req_id: any;
}

const CustomerDetail = (props: ServerSideProps) => {
  const isMounted = useRef(false);

  const { Permission: userData } = useAuthProvider();
  const [dataListing, setDataListing] = useState();
  const [isAdded, setIsAdded] = useState(false);
  const [disable, setdisable] = useState(false);
  const [Block, setBlock] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [isBlocked, setIsBlocked] = useState(false);
  const formData = useRouter();
  const [disableButton, setdisableButton] = useState(true);
  const [load, upload] = useState();
  const [isLoad, setIsLoad] = useState();
  const id = formData?.query?.id;
  const { data } = useSession();
  const token = data?.user?.image;
  const userType = data?.user?.group_type;

  useEffect(() => {
    if (isMounted.current) {
      return;
    }
    isMounted.current = true;

    const fetchData = async () => {
      try {
        setIsLoading(true);
        let res = await getcarrierbyid(token, id);
        if (res?.status === "success") {
          setDataListing(res?.data);
          setIsAdded(res?.data?.is_favorit);
          setIsBlocked(res?.data?.is_blocked);
        }
      } catch (error) {
        console.error("Error fetching data:", error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, [token, id]);


  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      let res = await getLogo(id);
      upload(res?.data?.logo);
      setIsLoad(res?.data?.is_logo)
    };

    fetchData();
  }, [id]);
  const [newId, setNewId] = useState();
  const [active, setActive] = useState(false);

  function isStatus(item: any, statusiD: any) {
    if (!Array.isArray(item)) {
      return false;
    }
    return item.includes(Number(statusiD));
  }
  // Fetch Url ID
  const fetchId = async () => {
    let res = await getId();
    setNewId(res?.data);
  };

  useEffect(() => {
    
    let status = isStatus(newId, id);
    setActive(status);
    fetchId();
  }, []);

  const handleAddButton = async () => {
    setdisable(true);
    try {
      const responseData = await CustomerAddToMyFavroutes(token, id, isAdded ? 0 : 1);
      if (responseData?.status === "success") {
        setdisable(false);

        toast.success(responseData.message, {
          position: toast.POSITION.TOP_CENTER,
        });
        toggleRegisterPopup();
        setIsAdded(true);
        setIsAdded(responseData?.data?.is_favorit);
        setIsBlocked(responseData?.data?.is_blocked);
      } else {
        toast.error(responseData.message, {
          position: toast.POSITION.TOP_CENTER,
        });
      }
    } catch (error) {
      return error;
    }
  };
  interface AvatarProps {
    userLogo: string;
  }

  const Avatar: React.FC<AvatarProps> = ({ userLogo, status }: any) => {
    return (
      <div
        className="user-img c-pointer position-relative"
        data-toggle="dropdown"
      >
        <Image
          style={{
            marginLeft: "16px",
            height: "80px",
            width: "80px",
          }}
          src={(status === 0) ? logo : userLogo}
          className="rounded-circle"
          alt="user avatar"
          height={36}
          width={36.69}
        />
      </div>
    );
  };
  const handleRemoveButton = async () => {
    setdisable(true);
    try {
      const response = await CustomerRemoveBlock(token, id);
      if (response?.status === "success") {
        setdisable(false);
        BlockPopup();
        toast.success(response.message, {
          position: toast.POSITION.TOP_CENTER,
        });
        BlockPopup();
        setIsBlocked(true);
        setIsAdded(response?.data?.is_favorit);
        setIsBlocked(response?.data?.is_blocked);
        setTimeout(() => {
          formData.push("/carriers");
        }, 2000);
      } else {
        toast.error(response.message, {
          position: toast.POSITION.TOP_CENTER,
        });
      }
    } catch (error) {
      return error;
    }
  };
  const handleBackbtn = () => {
    formData.back();
  };
  const [showRegisterPopup, setShowRegisterPopup] = useState(false);
  const [showBlock, setShowBlock] = useState(false);
  const [submit, setSubmit] = useState(false);
  const toggleRegisterPopup = () => {
    setShowRegisterPopup((prev) => !prev);
  };
  const BlockPopup = (i: any) => {
    if (i === 1) {
      setBlock(true);
      
    }
    setShowBlock((prev) => !prev);
  };
  const {
    buttonClass: addButtonClass,
    buttonText: addButtonText,
    buttonClassName: blockButtonClassName,
    buttonText2: blockButtonText
  } = newFunction();
  let buttonComponent = null;
  if (userData?.EditCarrierContactInformation && userType === "customers") {
    buttonComponent = (
      <Button
        disabled={disableButton}
        onClick={() => setSubmit(true)}
        type="submit"
        className="btn btn-primary buttonCol "
      >
        Update Carrier
      </Button>
    );
  }
  const imageAvatar = () => {

    return (
      dataListing?.is_premium === 1 ? <Avatar userLogo={load} status={isLoad} /> : <div
        className="user-img c-pointer position-relative"
        data-toggle="dropdown"
      >
        <Image
          style={{
            marginLeft: "16px",
            height: "80px",
            width: "80px",
          }}
          src={logo}
          className="rounded-circle"
          alt="user avatar"
          height={36}
          width={36.69}
        />
      </div>
    );
  };
  const { isCollapsed } = useCollapsed(); 

  return (
    <Layout>
      <ToastContainer />
      {isLoading && (
        <div id="loader_table">
          <ScaleLoader color="#3180f3" className="table_loader" />
        </div>
      )}
      <div className={` ${isCollapsed ? 'collapsed-quote' : 'content-body'}`}>
        <div className="table_top my-4">
          <div className="btns_sec  d-flex justify-content-between">
            <div>
              
              {token &&
                userType &&
                !active &&
                (userType === "customers" || userType === "super_admin") && (
                  <>
                    {
                      userData?.SelectAddtoMyCarriers ?
                        <button
                          onClick={toggleRegisterPopup}
                          className={`btn_fillters ${addButtonClass}`}
                        >
                          <span>
                            <i className="bi bi-plus-lg"></i>
                          </span>
                          {addButtonText}
                        </button> : ""
                    }
                    {userData?.SelectBlockBanCarrier ? <button
                      onClick={() => BlockPopup(isBlocked)}
                      className={blockButtonClassName}
                    >
                      <span>
                        <i className="bi bi-slash-circle"></i>
                      </span>
                      {blockButtonText}
                    </button> : ""}
                  
                  </>
                )}
            </div>
            <div className="d-flex gap-2">
              {buttonComponent}
              <div>
                <button onClick={handleBackbtn} className="btnBackCss  ">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-left-short" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5"></path></svg>Back
                </button>
              </div>
            </div>
          </div>
        
          <div className="user_logo_sec">
            {imageAvatar()}
        

            <div className="main-public-form">
              <div className="box-landing">
                <FormLabel className="carrier-details">
                  Carrier Company&nbsp;Name:
                </FormLabel>
                <div className="label-landing-users">
                  {dataListing?.billing_company
                    ? dataListing?.billing_company
                    : "N/A"}
                </div>
              </div>
              <div className="box-landing">
                <FormLabel className="carrier-details">MC:</FormLabel>
                <div className="label-landing-users">
                  {dataListing?.mc_number ? dataListing?.mc_number : "N/A"}
                </div>
              </div>
              <div className="box-landing">
                <FormLabel className="carrier-details">DOT:</FormLabel>
                <div className="label-landing-users">
                  {dataListing?.dot_number ? dataListing?.dot_number : "N/A"}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="my-3 mb-2">
          <div className="main-information mb-3">
            <h6 className="carriers-h6 mb-2">
              <b>Carrier Bulletin</b>
            </h6>

            <p>
              {dataListing?.bulletin
                ? dataListing?.bulletin
                : "No Carrier Bulletin Available"}
            </p>
          </div>
          <Row>
            <Col lg={4}>
              <div>
                <GeneralInformation gendetails={dataListing} />
              </div>
            </Col>
            <Col lg={4}>
              <div>
                <Row>
                  <ContactInformation
                    condetails={dataListing}
                    submit={submit}
                    setSubmit={setSubmit}
                    disableCheck={setdisableButton}
                  />
                </Row>
              </div>
            </Col>
            <Col lg={4}>
              <div>
                <MarketsTerminal markdetails={dataListing} />
              </div>
            </Col>
          </Row>
        </div>
      </div>

      <Modal show={showRegisterPopup} onHide={toggleRegisterPopup}>
        <Modal.Header>
          <Modal.Title>
            {isAdded
              ? "Are you sure you want to Remove Carrier?"
              : "Are you sure you want to Add Carrier?"}
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <div className="reg_button">
            <Button
              variant="primary"
              className="mx-2 "
              disabled={disable}
              onClick={() => handleAddButton()}
            >
              Confirm
            </Button>
            <Button
              variant="danger"
              className="mx-2 carrierButton"
              onClick={toggleRegisterPopup}
            >
              Close
            </Button>
          </div>
        </Modal.Body>
        <Modal.Footer></Modal.Footer>
      </Modal>
      <Modal show={showBlock} onHide={BlockPopup}>
        <Modal.Header>
          <Modal.Title>
            {Block
              ? "Are you sure you want to  Unblock Carrier?"
              : "Warning. This carrier will no longer be able to view your rate requests."}
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <div className="reg_button">
            <Button
              disabled={disable}
              variant="primary"
              className="mx-2 "
              onClick={() => handleRemoveButton()}
            >
              Submit
            </Button>
            <Button
              variant="danger"
              className="mx-2 carrierButton"
              onClick={BlockPopup}
            >
              Cancel
            </Button>
          </div>
        </Modal.Body>
        <Modal.Footer></Modal.Footer>
      </Modal>
    </Layout>
  );



  function newFunction() {
    const buttonClass = isAdded ? "green_btn" : "add_carriers";
    const buttonText = isAdded ? "Remove as My Carrier" : "Add to My Carriers";
    const buttonClassName = `btn_fillters ${isBlocked ? "red_btn" : "block_btn"}`;
    const buttonText2 = isBlocked ? "Unblock/Unban Carrier" : "Block/Ban Carrier";
    return { buttonClass, buttonText, buttonClassName, buttonText2 };
  }

}
export async function getServerSideProps(context: any) {
  const req_id = context?.params?.id;
  const session = await getServerSession(context.req, context.res, authOptions);

  return {
    props: {
      session: session,
      req_id: req_id,
    },
  };
}

export default CustomerDetail;