import avtar from "@/assets/images/default-avatar.jpg";
import { PiUserCircle } from "react-icons/pi";
import { Button, Modal, Spinner } from "react-bootstrap";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useRouter } from "next/navigation";
import WebService from "@/Services/WebService";
import cautionIcon from "@/assets/images/caution.svg";

interface PropsData {
  profileDetails?: any;
  closeDropdown?: any;
}
const ProfileDropdown = (props: PropsData) => {
  // const dispatch = useDispatch()
  const navigate = useRouter();
  const [flag, setFlag] = useState(false);
  const [profile_image, setProfileImage] = useState<any>(avtar);
  const [deleteModal, setDeleteModal] = useState(false);
  const { t } = useTranslation();

  useEffect(() => {
    if (props?.profileDetails !== null) {
      setProfileImage(props?.profileDetails?.profile_image);
    }
  }, [props?.profileDetails]);

  const handleLogout = () => {
    WebService.logout();
  };

  return (
    <>
      <div className="mobile-profile-dd">
        <div className="pb-1 font-14 cursor-pointer px-2" onClick={() => {
          setFlag(false)
          props.closeDropdown();
          navigate.push("/profile-setting");
        }}
          style={{ cursor: "pointer" }}>
          {/* <Link
            href="/profile-setting"
            onClick={() => {

            }}
            className=" dropdown-item"> */}
          <PiUserCircle size={18} className="icon" />&nbsp;&nbsp; My Profile
          {/* </Link> */}
        </div>
        <hr style={{ borderColor: '#bbb' }} className="my-1" />
        <div className="px-2">
          <svg
            width="18"
            height="18"
            className="icon"
            viewBox="0 0 18 18"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M8.99998 2.54651C5.43582 2.54651 2.54651 5.43584 2.54651 9C2.54651 12.5642 5.43582 15.4535 8.99998 15.4535C11.388 15.4535 13.4738 14.1567 14.5904 12.2264C14.7351 11.9762 15.0552 11.8907 15.3053 12.0354C15.5555 12.1801 15.641 12.5002 15.4963 12.7504C14.2003 14.9908 11.7767 16.5 8.99998 16.5C4.85785 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85785 1.5 8.99998 1.5C11.7767 1.5 14.2003 3.00923 15.4963 5.24962C15.641 5.49977 15.5555 5.81986 15.3053 5.96456C15.0552 6.10926 14.7351 6.02378 14.5904 5.77364C13.4738 3.84332 11.388 2.54651 8.99998 2.54651ZM9.37002 5.8393C9.57436 6.04365 9.57436 6.37496 9.37002 6.5793L7.47258 8.47674H15.9767C16.2657 8.47674 16.5 8.71101 16.5 9C16.5 9.28899 16.2657 9.52326 15.9767 9.52326H7.47258L9.37002 11.4207C9.57436 11.625 9.57436 11.9564 9.37002 12.1607C9.16568 12.365 8.83437 12.365 8.63003 12.1607L5.83934 9.37C5.635 9.16565 5.635 8.83435 5.83934 8.63L8.63003 5.8393C8.83437 5.63496 9.16568 5.63496 9.37002 5.8393Z"
              fill="#4A5264"
            />
          </svg>
        </div>
        <span className="me-2 font-14 " onClick={() => setDeleteModal(true)} style={{ cursor: "pointer" }}>&nbsp;&nbsp;Sign Out</span>
        {flag ? (
          <Spinner
            animation="border"
            role="status"
            size="sm"
            style={{ borderWidth: "2px", cursor: "pointer" }}
          >
            <span className="sr-only"></span>
          </Spinner>
        ) : (
          ""
        )}

        <Modal
          show={deleteModal}
          onHide={() => {
            setDeleteModal(false);
          }}
          centered
        >
          {/* <Modal.Header closeButton>
          </Modal.Header> */}
          <Modal.Body className="pt-0">
            <div className="text-center mt-2">
            <img src={cautionIcon.src} width={60} className="mb-3 text-center" alt="" style={{ marginLeft: "186px" }} />

              <p className="text-secondary-dark">{"Are you sure you want to logout?"}</p>

              {/* <h2 className="font-18 font-semibold">{t("Are you sure you want to logout?")}</h2> */}
              <div className="px-3 py-lg-1 py-3 text-end mobile-sticky-bottom text-center">
                <Button
                  className="btn-outline-brand me-3"
                  id="no"
                  onClick={() => {
                    setDeleteModal(false);
                  }}
                >
                  {t("No")}
                </Button>
                <Button
                  className="btn-outline-brand me-3"
                  id="yes"
                  onClick={() => handleLogout()}
                >
                  {t("Yes")}
                </Button>
              </div>
            </div>
          </Modal.Body>
        </Modal>
      </div>
    </>
  );
};
export default ProfileDropdown;