import { Grid, Card, IconButton } from "@mui/material";
import { Stack } from "@mui/system";
import { useFormik } from "formik";
import { getToken } from "helper-functions/getToken";
import { t } from "i18next";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { useGeolocated } from "react-geolocated";
import toast from "react-hot-toast";
import { useDispatch, useSelector } from "react-redux";
import { setParcelData } from "redux/slices/parcelDeliveryInfo";
import { CustomStackFullWidth } from "styled-components/CustomStyles.style";
import GuestCheckoutModal from "../../cards/GuestCheckoutModal";
import H1 from "../../typographies/H1";
import ParcelInfo from "./ParcelInfo";
import ReceiverInfoFrom from "./ReceiverInfoFrom";
import SenderInfoForm from "./SenderInfoForm";
import ValidationSchema from "./ValidationSchema";
import dynamic from "next/dynamic";
import { formatPhoneNumber } from "utils/CustomFunctions";
import SaveAddress from "../../SaveAddress";
import CustomModal from "components/modal";
import CloseIcon from "@mui/icons-material/Close";
import MapModal from "components/Map/MapModal";

const AuthModal = dynamic(() => import("components/auth/AuthModal"));
const PercelDelivery = ({ configData }) => {
  const router = useRouter();

  const dispatch = useDispatch();
  const { parcelInfo } = useSelector((state) => state.parcelInfoData);
  const { parcelCategories } = useSelector((state) => state.parcelCategories);
  const { profileInfo } = useSelector((state) => state.profileInfo);
  const [openMapModal, setOpenMapModal] = useState(false);
  const [senderLocation, setSenderLocation] = useState(
    parcelInfo ? parcelInfo?.senderLocations : {}
  );
  const [senderFormattedAddress, setSenderFormattedAddress] = useState("");
  const [receiverLocation, setReceiverLocation] = useState(
    parcelInfo ? parcelInfo?.receiverLocations : {}
  );
  const [receiverFormattedAddress, setReceiverFormattedAddress] = useState(parcelInfo ? parcelInfo?.receiverAddress : "");
  const [open, setOpen] = useState(false);
  const [sideDrawerOpen, setSideDrawerOpen] = useState(false);
  let token = getToken();
  const [openAuth, setOpenAuth] = useState(false);
  const [modalFor, setModalFor] = useState("sign-in");
  const [senderOptionalAddress, setSenderOptionalAddress] = useState({});
  const [receiverOptionalAddress, setReceiverOptionalAddress] = useState({});
  const [openSave, setOpenSave] = useState(false);
  const [saveFrom, setSaveFrom] = useState("");
  const { coords, isGeolocationAvailable, isGeolocationEnabled, getPosition } =
    useGeolocated({
      positionOptions: {
        enableHighAccuracy: false,
      },
      userDecisionTimeout: 5000,
      isGeolocationEnabled: true,
    });
  console.log("parcelInfo", parcelInfo);
  const addAddressFormik = useFormik({
    initialValues: {
      senderName: token
        ? profileInfo?.f_name
          ? profileInfo?.f_name
          : ""
        : parcelInfo?.senderName
          ? parcelInfo?.senderName
          : "",
      senderPhone: token
        ? profileInfo?.phone
          ? formatPhoneNumber(profileInfo?.phone)
          : null
        : parcelInfo?.senderPhone
          ? formatPhoneNumber(parcelInfo?.senderPhone)
          : null,
      senderEmail: profileInfo ? profileInfo?.email : parcelInfo?.senderEmail ? parcelInfo?.senderEmail : "",
      receiverName: parcelInfo?.receiverName ? parcelInfo?.receiverName : "",
      receiverPhone: parcelInfo?.receiverPhone ? formatPhoneNumber(parcelInfo?.receiverPhone) : "",
      receiverEmail: parcelInfo?.receiverEmail ? parcelInfo?.receiverEmail : "",
      senderRoad: parcelInfo?.senderRoad ? parcelInfo?.senderRoad : "",
      senderHouse: parcelInfo?.senderHouse ? parcelInfo?.senderHouse : "",
      senderFloor: parcelInfo?.senderFloor ? parcelInfo?.senderFloor : "",
      road: parcelInfo?.road ? parcelInfo?.road : "",
      house: parcelInfo?.house ? parcelInfo?.house : "",
      floor: parcelInfo?.floor ? parcelInfo?.floor : "",
    },
    validationSchema: ValidationSchema(),
    onSubmit: async (values, helpers) => {
      await formSubmitHandler(values);
    },
  });
  console.log({ parcelInfo });
  useEffect(() => {
    const currentLocationLatLng = JSON.parse(
      localStorage.getItem("currentLatLng")
    );
    const currentLocation = localStorage.getItem("location");
    setSenderLocation(currentLocationLatLng);
    setSenderFormattedAddress(currentLocation);
  }, []);
  useEffect(() => {
    addAddressFormik.setFieldValue(
      "senderPhone",
      profileInfo?.phone ? formatPhoneNumber(profileInfo?.phone) : formatPhoneNumber(parcelInfo?.senderPhone)
    );
  }, [profileInfo?.phone]);

  const handleOpenSave = (type) => {
    setSaveFrom(type);
    setOpenSave(true);
  };

  useEffect(() => {
    senderRoadHandler(
      senderOptionalAddress?.road
        ? senderOptionalAddress?.road
        : addAddressFormik.values.senderRoad
    );
    senderFloorHandler(
      senderOptionalAddress?.floor
        ? senderOptionalAddress?.floor
        : addAddressFormik.values.senderFloor
    );
    senderHouseHandler(
      senderOptionalAddress?.house
        ? senderOptionalAddress?.house
        : addAddressFormik.values.senderHouse
    );
  }, [senderOptionalAddress]);

  useEffect(() => {
    roadHandler(
      receiverOptionalAddress?.road
        ? receiverOptionalAddress?.road
        : addAddressFormik.values.road
    );
    floorHandler(
      receiverOptionalAddress?.floor
        ? receiverOptionalAddress?.floor
        : addAddressFormik.values.floor
    );
    houseHandler(
      receiverOptionalAddress?.house
        ? receiverOptionalAddress?.house
        : addAddressFormik.values.house
    );
  }, [receiverOptionalAddress]);

  const senderNameHandler = (value) => {
    addAddressFormik.setFieldValue("senderName", value);
  };
  const senderPhoneHandler = (value) => {
    addAddressFormik.setFieldValue("senderPhone", value);
  };
  const receiverNameHandler = (value) => {
    addAddressFormik.setFieldValue("receiverName", value);
  };
  const receiverPhoneHandler = (value) => {
    addAddressFormik.setFieldValue("receiverPhone", value);
  };
  const roadHandler = (value) => {
    addAddressFormik.setFieldValue("road", value);
  };
  const houseHandler = (value) => {
    addAddressFormik.setFieldValue("house", value);
  };
  const floorHandler = (value) => {
    addAddressFormik.setFieldValue("floor", value);
  };
  const senderRoadHandler = (value) => {
    addAddressFormik.setFieldValue("senderRoad", value);
  };
  const senderHouseHandler = (value) => {
    addAddressFormik.setFieldValue("senderHouse", value);
  };
  const senderFloorHandler = (value) => {
    addAddressFormik.setFieldValue("senderFloor", value);
  };

  const senderEmailHandler = (value) => {
    addAddressFormik?.setFieldValue("senderEmail", value);
  };
  const handleSenderLocation = (location, currentLocation) => {
    setSenderLocation(location);
    setSenderFormattedAddress(currentLocation);
  };
  const handleReceiverLocation = (location, currentLocation) => {
    console.log({location, currentLocation});
    
    setReceiverLocation(location);
    setReceiverFormattedAddress(currentLocation);
  };
  const receiverEmailHandler = (value) => {
    addAddressFormik?.setFieldValue("receiverEmail", value);
  };

  const handleRoute = () => {
    router.push("/checkout?page=parcel", undefined, { shallow: true });
  };
  let currentLocation = {};

  let zoneid = undefined;
  if (typeof window !== "undefined") {
    zoneid = localStorage.getItem("zoneid");
     currentLocation = JSON.parse(localStorage.getItem("currentLatLng"));
  }
  console.log({parcelCategories});
  console.log({receiverLocation});
  
  const formSubmitHandler = (values) => {
    if(!parcelCategories?.id){
      toast.error(t("Please select parcel category to proceed"));
      return;
    }
    if(!currentLocation?.lat || !currentLocation?.lng){
     setOpenMapModal(true);
     toast.error(t("Please select your location to proceed"));
     return;
    }

    const tempValue = {
      ...values,
      senderLocations: senderLocation,
      senderAddress: senderFormattedAddress,
      receiverLocations: receiverLocation,
      receiverAddress: receiverFormattedAddress,
      name: parcelCategories?.name,
      image: parcelCategories?.image_full_url,
      description: parcelCategories?.description,
    };
    
    
    
    if ((senderLocation || parcelInfo?.senderLocations) && (receiverLocation || parcelInfo?.receiverLocations)) {
      dispatch(setParcelData(tempValue));
      if (!token && configData?.guest_checkout_status === 1) {
        setOpen(true);
      } else {
        if (token) {
          router.push(
            {
              pathname: "/checkout",
              query: { page: "parcel" },
            },
            undefined,
            { shallow: true }
          );
        } else {
          setOpenAuth(true);
        }
      }
    } else {
      toast.error(t("Sender or Receiver location is missing"));
    }
  };

  return (
    <CustomStackFullWidth
      paddingBottom={{ xs: "20px", sm: "20px", md: "80px" }}
      pt="1.5rem"
    >
      <Stack paddingBottom="30px">
        <H1
          text="Parcel Delivery Information"
          textAlign="left"
          fontWeight="600"
          component="h1"
        />
      </Stack>
      <form noValidate onSubmit={addAddressFormik.handleSubmit}>
        <Grid container spacing={4}>
          <Grid item xs={12} sm={12} md={4}>
            <SenderInfoForm
              addAddressFormik={addAddressFormik}
              senderNameHandler={senderNameHandler}
              senderPhoneHandler={senderPhoneHandler}
              coords={coords}
              configData={configData}
              senderFormattedAddress={senderFormattedAddress}
              handleLocation={handleSenderLocation}
              setSenderFormattedAddress={setSenderFormattedAddress}
              setSenderLocation={setSenderLocation}
              senderRoadHandler={senderRoadHandler}
              senderHouseHandler={senderHouseHandler}
              senderFloorHandler={senderFloorHandler}
              senderEmailHandler={senderEmailHandler}
              handleOpenSave={handleOpenSave}
            />
          </Grid>
          <Grid item xs={12} sm={12} md={4}>
            <ReceiverInfoFrom
             handleOpenSave={handleOpenSave}
              addAddressFormik={addAddressFormik}
              receiverNameHandler={receiverNameHandler}
              receiverPhoneHandler={receiverPhoneHandler}
              roadHandler={roadHandler}
              houseHandler={houseHandler}
              floorHandler={floorHandler}
              coords={coords}
              handleLocation={handleReceiverLocation}
              receiverFormattedAddress={receiverFormattedAddress}
              setReceiverLocation={setReceiverLocation}
              setReceiverFormattedAddress={setReceiverFormattedAddress}
              configData={configData}
              receiverEmailHandler={receiverEmailHandler}
            />
          </Grid>
          <Grid item xs={12} sm={12} md={4}>
            <ParcelInfo setReceiverLocation={setReceiverLocation} parcelCategories={parcelCategories} />
          </Grid>
        </Grid>
      </form>
      {open && (
        <GuestCheckoutModal
          open={open}
          setOpen={setOpen}
          setSideDrawerOpen={setSideDrawerOpen}
          handleRoute={handleRoute}
          setModalFor={setModalFor}
          setOpenAuth={setOpenAuth}
        />
      )}
      <AuthModal
        modalFor={modalFor}
        setModalFor={setModalFor}
        open={openAuth}
        handleClose={() => setOpenAuth(false)}
      />
      {openSave && (
        <CustomModal openModal={openSave} handleClose={() => setOpenSave(false)}>
          <CustomStackFullWidth sx={{ minWidth: "350px", position: "relative",padding: "1rem 1rem" }}>
            <IconButton
              onClick={() => setOpenSave(false)}
              sx={{
                position: "absolute",
                top: -2,
                right: 0,
                zIndex: 2,
                backgroundColor: (theme) => theme.palette.background.paper,
                "&:hover": {
                  backgroundColor: (theme) => theme.palette.action.hover,
                },
              }}
            >
              <CloseIcon sx={{ fontSize: "1rem" }} />
            </IconButton>

          
              <SaveAddress
                configData={configData}
                setSenderFormattedAddress={setSenderFormattedAddress}
                setSenderLocation={setSenderLocation}
                setSenderOptionalAddress={setSenderOptionalAddress}
                setReceiverFormattedAddress={setReceiverFormattedAddress}
                setReceiverLocation={setReceiverLocation}
                setReceiverOptionalAddress={setReceiverOptionalAddress}
                sender={saveFrom === "sender" ? "true" : undefined}
                setOpenSave={setOpenSave}
                parcel
              />
        
          </CustomStackFullWidth>
        </CustomModal>
      )}
       {openMapModal && (
        <MapModal
          open={openMapModal}
          handleClose={() => setOpenMapModal(false)}
          disableAutoFocus
          fromStore
          fromparcel
          
        />
      )}
    </CustomStackFullWidth>
  );
};

export default PercelDelivery;
