import { useEffect, useState } from "react";
import CustomDialog from "../../../../components/custom/dialog";
import { AddOrEditAddress } from "./address/AddOrEditAddress";
import AddIcon from "@mui/icons-material/Add";
import CustomButton from "../../../../components/custom/button";

import { DeleteAddress } from "./address/DeleteAddress";
import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
import WorkOutlineOutlinedIcon from "@mui/icons-material/WorkOutlineOutlined";

import { useAppDispatch, useAppSelector } from "../../../../../app/redux/hooks";
import { getAddressListAsync } from "../../../../../app/slices/addressSlice/ProfileSlice";
import AddressListSkeleton from "../skelitons/ManageAddressListSkeleton";
import { EmptyAddressList } from "./emptyStates/EmptyStatesProfile";
import useFetchCurrentLocation from "../../chekout/components/deliveryAddress/FetchCurrentLocationAndPlace";
export const ManageAddress = () => {
  const dispatch = useAppDispatch();
  const { addressList }: any = useAppSelector((state) => state?.AddressState);
  const [modalType, setModalType] = useState("");
  const [selectedAddressType, setSelectedAddressType] = useState("");
  const [addressId, setAddressId] = useState("");
  const { place } = useFetchCurrentLocation();

  useEffect(() => {
    dispatch(getAddressListAsync());
  }, []);
  const onModalSelection = (type: string, item?: any) => {
    setAddressId(item?.id);
    setSelectedAddressType(item?.address_type);
    setModalType(type);
  };
  const modalClose = () => {
    setModalType("");
  };
  // const handleAddressSelection = (
  //   event: React.ChangeEvent<HTMLInputElement>
  // ) => {
  //   setSelectedAddress(event.target.value);
  // };
  return (
    <>
      <div
        className="my-account-content account-order"
        style={{
          fontFamily: "Albert Sans, sans-serif",
          fontSize: "14px",
          lineHeight: "22px",
          fontWeight: "400",
        }}
      >
        <h4 className="title-right">Manage Addresses</h4>
        <div className="row mt-3">
          <div className="col-md-6">
            <div className="card mb-3 card-navya">
              <div className="card-body">
                <div className="row">
                  <div className="col-md-2">
                    <div className="pe-3">
                      <HomeOutlinedIcon
                        className="address-text"
                        fontSize="large"
                      />
                    </div>
                  </div>
                  <div className="col-md-10">
                    <div>
                      <p className="address-text">
                        <b>Add New Address</b>
                      </p>
                      <p className="mb-2 address-text">
                        You seem to be in a new Address
                      </p>
                      <p className="address-text">{place && place}</p>
                      <CustomButton
                        size="medium"
                        endIcon={<AddIcon />}
                        fullWidth
                        name="Add New Address"
                        onClick={() => onModalSelection("add")}
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        {addressList?.loader ? (
          <AddressListSkeleton />
        ) : (
          <div className="">
            <div className="row">
              {addressList?.data?.length > 0 ? (
                addressList?.data?.map((item: any, index: any) => {
                  return (
                    <div key={index} className="col-md-6">
                      {/* <FormControl>
                  <RadioGroup
                    row
                    aria-labelledby="demo-row-radio-buttons-group-label"
                    name="row-radio-buttons-group"
                    value={selectedAddress}
                    onChange={handleAddressSelection}
                  >
                    <FormControlLabel
                      value={item?.is_default}
                      control={<Radio />}
                      label={ */}
                      <div
                        className="card mb-3 card-navya"
                        // style={{ minWidth: 300 }}
                      >
                        <div className="card-body">
                          <div className="row">
                            <div className="col-md-2">
                              <div className="pe-3">
                                {/* <img
                            width="40"
                            src="images/home.svg"
                            className="img-fluid"
                            alt=""
                          /> */}
                                {item?.address_type === "home" ? (
                                  <HomeOutlinedIcon
                                    fontSize="large"
                                    className="address-text"
                                  />
                                ) : (
                                  <WorkOutlineOutlinedIcon
                                    fontSize="large"
                                    className="address-text"
                                  />
                                )}
                              </div>
                            </div>
                            <div className="col-md-10">
                              <div>
                                <p className="address-text">
                                  <b>{item?.address_type?.toUpperCase()}</b>
                                </p>
                                <p className="mb-2 address-text">
                                  {`${item?.flat_no}, ${item?.landmark}`}
                                </p>
                              </div>

                              <div className="row-md-12">
                                <span
                                  className="btn-prime"
                                  // endIcon={<EditIcon />}
                                  onClick={() => onModalSelection("edit", item)}
                                >
                                  Edit{" "}
                                </span>

                                <span
                                  style={{ marginLeft: "10px" }}
                                  className="btn-second ml-2"
                                  onClick={() =>
                                    onModalSelection("delete", item)
                                  }
                                  // endIcon={<DeleteForeverIcon />}
                                >
                                  Delete{" "}
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      {/* }
                    />
                  </RadioGroup>
                </FormControl> */}
                    </div>
                  );
                })
              ) : (
                <EmptyAddressList />
              )}
            </div>
          </div>
        )}
      </div>
      <CustomDialog
        component={
          <AddOrEditAddress
            addressId={addressId}
            // isEdit={true}
            modalClose={modalClose}
            modalType={modalType}
          />
        }
        title="Edit"
        openDialog={modalType === "edit"}
        handleCloseDialog={modalClose}
        modalPlace="right"
      />
      <CustomDialog
        component={
          <AddOrEditAddress
            // isEdit={false}
            modalType={modalType}
            modalClose={modalClose}
          />
        }
        title="Add New Address"
        openDialog={modalType === "add"}
        handleCloseDialog={modalClose}
        modalPlace="right"
      />
      <CustomDialog
        component={
          <DeleteAddress
            modalClose={modalClose}
            addressId={addressId}
            type={selectedAddressType}
          />
        }
        title="Delete"
        openDialog={modalType === "delete"}
        handleCloseDialog={modalClose}
      />
    </>
  );
};