/* eslint-disable react/jsx-key */
import React, { useEffect, useState } from "react";
import { useSession } from "next-auth/react";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { object } from "yup";
import { ToastContainer, toast } from "react-toastify";
import {
  Updatecarrier,
  getStates,
  getMarket,
  getTerminals,
  getStateMarket,
} from "@/services/public";
import "primereact/resources/themes/saga-blue/theme.css";
import { MultiSelect } from "primereact/multiselect";
import { Form, FormGroup, Card, Row, Col } from "react-bootstrap";
import { useRouter } from "next/router";
import { ScaleLoader } from "react-spinners";

export default function EditCarrierProfile({ onClose, userCarrierId, refresh }) {
  
  const [NameMarket, setNameMarket] = useState();
  const [NameTerminal, setNameTerminal] = useState();
  const [NameState, setNameState] = useState();
  const [states, setStates] = useState();
  const [Newstates, setNewStates] = useState();
  const [isloading, setIsloading] = useState(false);
  const CodesState = states?.map((item) => item.state_code);
  const [buttonDisable, setButtonDisable] = useState(false);
  const [selectedStateOptions, setSelecteStatedOptions] = useState([]);
  const [selectedTerminalOptions, setSelecteTerminalOptions] = useState();
  const [marketName, setMarketName] = useState();
  const [selectedMarkets, setSelectedMarkets] = useState();
  const [terminalName, setTerminalName] = useState();
  const { data } = useSession();
  const id = data?.user?.carrier_id;
  const stateNames = states?.map((item) => item.state_name);
  
  useEffect(() => {
    const filteredStates = Newstates?.filter((item) =>
      stateNames?.includes(item?.state_name),
    );
    setSelecteStatedOptions(filteredStates);
  }, [Newstates, states]);

  useEffect(() => {
    const fetchData = async () => {
      let res = await getStateMarket(token, userCarrierId ? userCarrierId:id);
      setIsloading(true);
      setNameMarket(res?.data?.market);
      setNameTerminal(res?.data?.terminal);
      setNameState(res?.data?.state);
      setStates(res?.data?.state);
      if (res?.status === "success") {
        setIsloading(false);
      }
    };

    fetchData();
  }, []);
  const token = data?.user?.image;
  const router = useRouter();

  useEffect(() => {
    setIsloading(true);

    getStates().then((response) => {
      if (response?.status == "success") {
        setNewStates(response?.data);
        setIsloading(false);
      } else {
        setNewStates(null);
      }
    });
  }, [setNewStates]);

  const getMarketData = (payload: any = {}) => {
    getMarket(payload).then((response) => {
      if (response?.status == "success") {
        setMarketName(response?.data);
      } else {
        setMarketName(null);
      }
    });
  };

  const allMarkets = NameMarket?.map((location) => location.market);

  useEffect(() => {
    setMarketName(NameMarket);
    setSelectedMarkets(NameMarket);
    setSelecteTerminalOptions(NameTerminal);
    setTerminalName(NameTerminal);
    setStates(NameState);
  }, [NameMarket, NameTerminal, NameState]);
  useEffect(() => {
    if (NameMarket?.length) {
      getTerminalData({ market: allMarkets });
    }
  }, [NameMarket]);
  useEffect(() => {
    if (NameState?.length) {
      getMarketData({ state_code: CodesState });
    }
  }, [NameState]);
  const getTerminalData = (payload: any = {}) => {
    getTerminals(payload).then((response) => {
      if (response?.status == "success") {
        setTerminalName(response?.data);
      } else {
        setTerminalName(null);
      }
    });
  };

  const handleSelectStateChange = (e, i) => {
    setSelecteStatedOptions(e.target.value);
    if (e.target.value.length > 0) {
      const stateCode = e.target.value;
      const stateCodes = stateCode?.map((state) => state?.state_code);
      const payload = {
        state_code: stateCodes,
      };
      const marketCodes = selectedMarkets
        ? selectedMarkets.map((state) => state?.market)
        : [];

      const payloadTerminal = {
        market: marketCodes,
      };

      getMarketData(payload);
      getTerminalData(payloadTerminal);
    } else {
      setSelecteTerminalOptions(null);
      setSelectedMarkets(null);
      setTerminalName([]);
      setMarketName([]);
    }
  };

  const handleSelectMarketChange = (e) => {
    setSelectedMarkets(e.target.value);
    if (e.target.value.length > 0) {
      const MarketName = e.target.value;
      const marketCodes = MarketName.map((state) => state?.market);
      const payload = {
        market: marketCodes,
      };
      getTerminalData(payload);
    } else {
      setSelecteTerminalOptions(null);
      setTerminalName([]);
    }
  };

  const handleSelectTerminalChange = (e) => {
    setSelecteTerminalOptions(e.value);
  };

  const { handleSubmit, setValue, control, formState, reset } = useForm({
    resolver: yupResolver(object().shape({})),
  });

  const resetMultiselect = () => {
    if (selectedTerminalOptions) {
      selectedTerminalOptions.splice(0, selectedTerminalOptions.length);
      setSelecteTerminalOptions([...selectedTerminalOptions]);
    }

    if (selectedMarkets) {
      selectedMarkets.splice(0, selectedMarkets.length);
      setselectedMarkets([...selectedMarkets]);
    }
  };
  const { errors } = formState;
  const onSubmit = async () => {
    const stateCode = selectedStateOptions?.map((state) => state?.state_code);
    const marketCode = selectedMarkets?.map((state) => state?.market);
    const marketId = selectedTerminalOptions?.map((state) => state?.id);
    try {
      setButtonDisable(true);
      let load = {
        state_code: stateCode,
        market: marketCode,
        terminal_id: marketId,
      };
      const response = await Updatecarrier(load, token, userCarrierId ?userCarrierId:id);

      if (response?.status === "success" || response?.status_code === 200) {
        setButtonDisable(false);
      
        toast.success(response?.message, {
          position: toast.POSITION.TOP_CENTER,
        });
        if (userCarrierId) {
          refresh(true);
        }

        reset();
        onClose();
        setValue("phone", "");
        setValue("company_address", "");
        resetMultiselect();
        setTimeout(() => {
          router.push("/login");
        }, 2000);
      } else {
        setButtonDisable(false);
        if (
          response?.status === "error" &&
          response?.message === "Account already exists."
        ) {
          toast.error(response?.message, {
            position: toast.POSITION.TOP_CENTER,
          });
          reset();
          setValue("phone", "");
          setValue("company_address", "");
          resetMultiselect();
        } else {
          toast.error(response?.message, {
            position: toast.POSITION.TOP_CENTER,
          });
        }
      }
    } catch (error) {
      toast.error(error, {
        position: toast.POSITION.TOP_CENTER,
      });
    }
  };
  const filterSelectedValue = (selectedArr: any, marketNames: any) => {
    if (selectedArr) {
      return marketNames?.filter((obj1: any) =>
        selectedArr.some((obj2: any) => obj1.id === obj2.id),
      );
    }
    return null;
  };
  const onShow = () => {
    let selectAllCheckbox: any = document.querySelector(
      ".p-multiselect-header > .p-checkbox"
    );
    selectAllCheckbox.style.marginRight = "8px";
    selectAllCheckbox.after(" Select All");
  };
  return (
    <Card className="carrier_modal">
      {isloading && (
        <div id="loader_table">
          <ScaleLoader color="#3180f3" className="table_loader" />
        </div>
      )}
      <ToastContainer />
      <button
        className="btn close-btn"
        style={{ float: "left" }}
        onClick={onClose}
      >
        <i className="bi bi-x-lg"></i>
      </button>
      <div className="popup-header">
        {/* <h6 className='HeadViews'>Edit State/Market/Terminal</h6> */}
      </div>
      <Row className="carrier-Width" style={{maxHeight: '500px', overflowY: 'auto'}}>
        <Col md={12} className="my-3 px-4 px-md-0">
          <Form onSubmit={handleSubmit(onSubmit)} autoComplete="off">
            <Row>
              <Col lg={12}>
                <FormGroup className="form-group">
                  <label className="form-label" htmlFor="firstName">
                    State/Province:
                  </label>
                  <div className="statespan">
                    <Controller
                      name="selectedStateOptions"
                      control={control}
                      render={({ field }) => (
                        <MultiSelect
                          display="chip"
                          options={Newstates}
                          value={selectedStateOptions}
                          onChange={(e) => {
                            field.onChange(e.value);
                            handleSelectStateChange(e, field.value);
                          }}
                          optionLabel="state_name"
                          className={`form-control ${
                            !selectedStateOptions?.length &&
                            errors.selectedStateOptions
                              ? "is-invalid"
                              : ""
                          }`}
                          placeholder="Select State/Province"
                          onShow={onShow}
                        />
                      )}
                    />
                    <p className="invalid-feedback">
                      {!selectedStateOptions?.length &&
                        errors.selectedStateOptions?.message}
                    </p>
                  </div>
                </FormGroup>
              </Col>
              <Col lg={12}>
                <FormGroup className="form-group">
                  <div className="marketspan">
                    <label className="form-label" for="firstName">
                      Market :
                    </label>
                    <Controller
                      name="selectedMarkets"
                      control={control}
                      render={({ field }) => (
                        <MultiSelect
                          display="chip"
                          options={marketName}
                          value={filterSelectedValue(
                            selectedMarkets,
                            marketName,
                          )}
                          onChange={(e) => {
                            field.onChange(e.value);
                            handleSelectMarketChange(e);
                          }}
                          optionLabel="market"
                          className={`form-control ${
                            errors.selectedMarkets ? "is-invalid" : ""
                          }`}
                          placeholder="Select Market"
                          onShow={onShow}
                        />
                      )}
                    />
                    <p className="invalid-feedback">
                      {errors.selectedMarkets?.message}
                    </p>
                  </div>
                </FormGroup>
              </Col>

              <Col lg={12}>
                <FormGroup className="form-group">
                  <div className="teminalspan">
                    <label className="form-label" for="firstName">
                      Terminal :
                    </label>
                    <Controller
                      name="selectedTerminalOptions"
                      control={control}
                      render={({ field }) => (
                        <MultiSelect
                          display="chip"
                          options={terminalName}
                          value={filterSelectedValue(
                            selectedTerminalOptions,
                            terminalName,
                          )}
                          onChange={(e) => {
                            field.onChange(e.value);
                            handleSelectTerminalChange(e);
                          }}
                          optionLabel="name"
                          className={`form-control ${
                            errors.selectedTerminalOptions ? "is-invalid" : ""
                          }`}
                          placeholder="Select Terminal"
                          onShow={onShow}
                        />
                      )}
                    />
                    <p className="invalid-feedback">
                      {errors.selectedTerminalOptions?.message}
                    </p>
                  </div>
                </FormGroup>
              </Col>
            </Row>

            <Row className="justify-content-center my-3 px-3">
              <button
                type="submit"
                className="btn-block btn-color divStylecss-update"
                disabled={buttonDisable}
              >
                Save
              </button>
            </Row>
          </Form>
        </Col>
      </Row>
    </Card>
  );
}

interface PropTypes {
  type?: string;
  id: string;
  placeHolder: string;
  register: any;
  errors: any;
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

interface CustomPropType extends PropTypes {
  state: boolean;
}