'use client';
import {
  Row,
  Col,
  Button,
  Card,
  Form,
  Modal,
} from "react-bootstrap";

import { useEffect, useState } from "react";
import Uploadicon from "@/assets/images/noImage.png";
import { toast } from "react-toastify";
import { useDispatch, useSelector } from "react-redux";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import { BsEye, BsEyeSlash } from "react-icons/bs";
import WebService from "@/Services/WebService";
import { Logo, profileImages } from "../redux/action";
import CommonFunction from "@/Services/CommonFunction";
import PageTitle from "@/Common/PageTitle";
import HelperService from "@/Services/HelperService";
import CompoLoader from "@/Common/ComponentLoader/CompoLoader";
import { Label } from "@/Common/Label/Label";
import Link from "next/link";

const ProfileSettings = () => {
  const { profile_image_url } = useSelector((state: any) => state?.profile);
  const [profilePhoto, setProfilePhoto] = useState<any>();
  const [imgErrFlag, setImgErrFlag] = useState(false);
  const [imgErrMsg, setImgErrMsg] = useState("");
  const [pageLoader, setPageLoader] = useState(false);
  const [type, setType] = useState<string>("password");
  const [getOldPasswordErrorMessage, setOldPasswordErrorMessage] = useState<string>("Please enter old password");
  const [getNewPasswordErrorMessage, setNewPasswordErrorMessage] = useState<string>("Please enter new password");
  const [getConfirmPasswordErrorMessage, setConfirmPasswordErrorMessage] = useState<string>("Please enter confirm password");
  const [confirm_password, setConfirmPassword] = useState<string>("password");
  const [current_password, setCuurentPassword] = useState<string>("password");
  const [icon, setIcon] = useState<any>(BsEyeSlash);
  const [errFlag, setErrFlag] = useState(false);
  const [errOldPasswordFlag, setErrOldPasswordFlag] = useState(false);
  const [errNewPasswordFlag, setErrNewPasswordFlag] = useState(false);
  const [passwordNotMatchErrorFlag, setPasswordNotMatchErrorFlag] = useState(false)
  let dispatch = useDispatch();
  const [data, setData] = useState({
    name: "-",
    mobile_number: "-",
    dial_code: "-",
    email: "-",
    country_code: "IN"
  });
  useState<any>(null);

  useEffect(() => {
    setProfilePhoto({ localAddress: profile_image_url });
  }, [profile_image_url]);

  useEffect(() => {
    meCallAfterChange();
  }, []);

  const meCallAfterChange = async () => {
    setPageLoader(true);
    return WebService.getAPI({
      action: `admin/Me`,
      body: null,
      isShowError: true,
    })
      .then((res: any) => {
        setPageLoader(false);
        setData(res?.info);
        if (res?.info?.profile_image !== null) {
          dispatch(profileImages(res?.info?.profile_image));
          setProfilePhoto({ localAddress: res?.info?.profile_image });
        }

        if (res?.info?.logo !== null) {
          const file = {
            file: res?.info?.logo,
            localAddress: res?.info?.logo,
            existing: true,
          };
          dispatch(Logo(file));
        }
      })
      .catch((error: any) => {
        setPageLoader(false);
        return error;
      });
  };

  const [getPasswordInput, setPasswordInput] = useState<any>({
    new_password: "",
    current_password: "",
    confirm_password: "",
  });

  const handleUploadProfilePhoto = () => {
    return WebService.uploadAPI({
      action: `admin/profile/upload`,
      body: null,
      _file: profilePhoto.file,
      key: "profile_image",
    })
      .then((res: any) => {
        meCallAfterChange();
      })
      .catch((error: any) => {
        return error;
      });
  };

  const handleFileChange = (event: any) => {
    const selectedFiles = event.target.files;
    if (selectedFiles.length > 0) {
      if (selectedFiles[0].size > 10 * 1024 * 1024) {
        setImgErrMsg("Maximum image size 10 mb");
        setImgErrFlag(true);
        return;
      } else {
        const firstFile = {
          file: selectedFiles[0],
          localAddress: URL.createObjectURL(selectedFiles[0]),
          existing: false,
        };

        setProfilePhoto(firstFile);
        setImgErrMsg("");
        setImgErrFlag(false);
      }
    }
  };

  const saveProfileInfo = () => {
    WebService.addLoader("updateInfoLoader");
    WebService.CommonApi({
      method: "POST",
      action: `admin/profile`,
      body: data,
      isShowError: true,
    })
      .then((res: any) => {
        WebService.removeLoader("updateInfoLoader");
        toast.success(res.message);
        meCallAfterChange();

        if (!profilePhoto.existing) {
          handleUploadProfilePhoto();
        }
      })
      .catch((error: any) => {
        WebService.removeLoader("updateInfoLoader");
        toast.error(error?.response?.data?.message);
        return error;
      });
  }

  const [show, setShow] = useState(false);
  const handleClose = () => {
    setShow(false);
    setErrFlag(false);
  };
  const handleShow = () => setShow(true);

  const handleChangePassword = () => {
    WebService.addLoader("change-password-modal");
    // delete getPasswordInput.confirm_password;
    WebService.CommonApi({
      method: "POST",
      action: `admin/change/password`,
      body: getPasswordInput
    }).then((res: any) => {
      WebService.removeLoader("change-password-modal");
      if (res?.status) {
        toast.success(res?.message);
        handleClose();
      } else {
        toast.error(res?.message);
      }
    }).catch((error: any) => {
      toast.error(error?.response?.data?.message);
    })
  }

  const handleToggle = () => {
    if (type === "password") {
      setIcon(BsEye);
      setType("text");
    } else {
      setIcon(BsEyeSlash);
      setType("password");
    }
  };
  const handleConfirmPasswordToggle = () => {
    if (confirm_password === "password") {
      setIcon(BsEye);
      setConfirmPassword("text");
    } else {
      setIcon(BsEyeSlash);
      setConfirmPassword("password");
    }
  };
  const handleOldPasswordToggle = () => {
    if (current_password === "password") {
      setIcon(BsEye);
      setCuurentPassword("text");
    } else {
      setIcon(BsEyeSlash);
      setCuurentPassword("password");
    }
  };

  const handleValidPassword = () => {
    let flag = false;
    flag = CommonFunction.checkFormEmptyFields(getPasswordInput);

    let oldPasswordMessage = CommonFunction.passwordValidation(getPasswordInput?.current_password || "");
    if (oldPasswordMessage === false) {
      flag = true;
      setErrOldPasswordFlag(true);
      setOldPasswordErrorMessage(('please enter valid password'))
    }

    let newPasswordMessage = CommonFunction.passwordValidation(getPasswordInput?.new_password || "");
    if (newPasswordMessage === false) {
      flag = true;
      setErrNewPasswordFlag(true);
      setNewPasswordErrorMessage(('please enter valid password'))
    }

    if (getPasswordInput?.new_password !== getPasswordInput?.confirm_password) {
      flag = true;
      setPasswordNotMatchErrorFlag(true);
      setConfirmPasswordErrorMessage(('password not match'));
    }


    if (flag) {
      setErrFlag(true);
      return;
    } else {
      setErrFlag(false);
      handleChangePassword();
    }
  }

  return (
    <>
      {pageLoader ? (
        <CompoLoader />
      ) : (
        <div className="page-profile-settings pb-3">
          <div className="sticky-top-mo">

            <Row className=" mb-lg-4 mb-3 align-items-center">
              <Col lg={8} xs={12}>
                <div className="d-flex gap-3 align-items-center">
                  <PageTitle title={('Profile Details')} backArrow={false} />
                </div>
              </Col>
            </Row>
          </div>

          <Card className="card-style mb-lg-4 mb-3">
            <Card.Header className="py-2">
              <div className="d-flex justify-content-between align-items-center">
                <h4 className="card-title">{('Profile Details')}</h4>

              </div>
            </Card.Header>
            <Card.Body>
              <div className="d-lg-flex gap-4">
                <div className="d-lg-block d-flex gap-3">
                  <div className="photo-uploader">
                    <br />
                    <div className="photo-uploader">
                      <div className="upoload-btn">
                        {
                          profilePhoto === null ?
                            <>
                              <img
                                src={Uploadicon.src}
                                height={100}
                                width={100}
                              />
                              <input
                                type="file"
                                id="browse"
                                onChange={handleFileChange}
                                accept=".jpeg, .png,.svg, ,.jpg"
                              />
                            </>
                            :
                            <>
                              <img
                                src={profilePhoto?.localAddress}
                                height={100}
                                width={100}
                              />
                              <input
                                type="file"
                                id="browse"
                                onChange={handleFileChange}
                                accept=".jpeg, .png,.svg, ,.jpg"
                              />
                            </>
                        }
                      </div>
                    </div>
                  </div>
                </div>

                <Row className="w-100">
                  <Col lg={12} xs={12} className="mb-3 ">
                    <label className="form-label required">{('Full Name')}</label>
                    <Form.Control
                      type="text"
                      placeholder={('Enter Full Name')}
                      min={0}
                      value={data?.name || ""}
                      onChange={(e: any) => {
                        setData((prePlan: any) => {
                          return { ...prePlan, name: e.target.value };
                        })
                      }}
                    />
                    {data?.name !== "" && errFlag ? (
                      <Label
                        title={('Please enter full name')}
                        modeError={true}
                      />
                    ) : (
                      ""
                    )}
                  </Col>

                  <Col lg={6} xs={6} className="mb-3 ">
                    <label className="form-label required">{('Email')}</label>
                    <Form.Control
                      type="text"
                      placeholder={('Enter email')}
                      min={0}
                      value={data?.email || ""}
                      onChange={(e: any) => {
                        setData((prePlan: any) => {
                          return { ...prePlan, email: e.target.value };
                        })
                      }}
                    />
                    {data?.email !== "" && errFlag ? (
                      <Label
                        title={('Please enter email')}
                        modeError={true}
                      />
                    ) : (
                      ""
                    )}
                  </Col>
                  <Col lg={6} xs={6} className="mb-3">
                    <label className="form-label required">{('Mobile Number')}</label>
                    <PhoneInput
                      country={"gb"}
                      value={
                        data?.dial_code + data?.mobile_number
                      }
                      onChange={(p, phone: any, __) => {
                        let mobile = HelperService.removeDialCodeFromMobile(
                          p,
                          phone.dialCode
                        );
                        console.log("mobile", mobile);
                        setData((preLoad: any) => {
                          return {
                            ...preLoad,
                            mobile_number: mobile,
                            dial_code: "+" + phone.dialCode,
                            country_code: phone.countryCode,
                          };
                        });
                      }}
                    />
                    {data?.mobile_number === "" && errFlag && (
                      <Label
                        title={('Please enter valid number')}
                        modeError={true}
                      />
                    )}
                  </Col>
                  <Col lg={12} xs={12} className="mb-3 d-flex justify-content-end">
                    <Link href="#" className="mx-3 text-muted" onClick={handleShow}>{('Change Password')}</Link>
                  </Col>
                </Row>

              </div>
            </Card.Body>
            <Card.Footer>
              <div className="row">
                <div className="col-lg-12 d-flex justify-content-end ">
                  <Button
                    id="updateInfoLoader"
                    className="btn-brand"
                    onClick={() => {
                      saveProfileInfo();
                    }}
                  >
                    {('Save')}
                  </Button>
                </div>
              </div>
            </Card.Footer>
          </Card>
        </div>
      )}

      <Modal show={show} onHide={handleClose} centered>
        <Modal.Header closeButton>
          <Modal.Title>{('Password Reset')}</Modal.Title>
        </Modal.Header>
        <Modal.Body className="pt-0">
          <Card className="card-style mb-lg-4 mb-3 mt-3">

            <Card.Body>
              <Row className="w-100 pt-3" >
                <Col lg={12} xs={12} className="mb-3" >
                  <Form.Group className="mb-3">
                    <Form.Label className="form-label required">
                      {('Old Password')} {" "} <span className="text-danger">*</span>
                    </Form.Label>
                    <div className="input-group mb-2">
                      <input
                        type={current_password}
                        value={getPasswordInput?.current_password || ""}
                        className="form-control border-end-0"
                        placeholder={('Enter Old Password')}
                        autoComplete="off"
                        onChange={(e: any) => {
                          setErrOldPasswordFlag(false);
                          setPasswordInput((prevData: any) => ({
                            ...prevData,
                            current_password: e.target.value
                          }));
                        }}
                      />
                      <span
                        className="input-group-text text-secondary bg-white border-start-0 cursor-pointer"
                        onClick={handleOldPasswordToggle}
                      >
                        {current_password == "password" ? (
                          <BsEye size={16} />
                        ) : (
                          <BsEyeSlash size={16} />
                        )}
                      </span>
                    </div>
                    {getPasswordInput?.current_password == "" && errFlag && (
                      <Label title={getOldPasswordErrorMessage} modeError={true} />
                    )}
                    {errOldPasswordFlag && errFlag && (
                      <Label title={getOldPasswordErrorMessage} modeError={true} />
                    )}
                  </Form.Group>
                </Col>
                <Col lg={12} xs={12} className="mb-3" >
                  <Form.Group className="mb-3">
                    <Form.Label className="form-label required">
                      {('Password')} {" "} <span className="text-danger">*</span>
                    </Form.Label>
                    <div className="input-group mb-2">
                      <input
                        type={type}
                        value={getPasswordInput?.new_password || ""}
                        className="form-control border-end-0"
                        placeholder="Password"
                        autoComplete="off"
                        onChange={(e: any) => {
                          setErrNewPasswordFlag(false);
                          setPasswordInput((prevData: any) => ({
                            ...prevData,
                            new_password: e.target.value
                          }));
                        }}
                      />
                      <span
                        className="input-group-text text-secondary bg-white border-start-0 cursor-pointer"
                        onClick={handleToggle}
                      >
                        {type == "password" ? (
                          <BsEye size={16} />
                        ) : (
                          <BsEyeSlash size={16} />
                        )}
                      </span>
                    </div>
                    {((getPasswordInput?.new_password == "") || (errNewPasswordFlag)) && errFlag && (
                      <Label title={getNewPasswordErrorMessage} modeError={true} />
                    )}
                  </Form.Group>
                </Col>
                <Col lg={12} xs={12} className="mb-3" >
                  <Form.Group className="mb-3">
                    <Form.Label className="form-label required">
                      {('Confirm Password')}{" "} <span className="text-danger">*</span>
                    </Form.Label>
                    <div className="input-group mb-2">
                      <input
                        type={confirm_password}
                        value={getPasswordInput?.confirm_password || ""}
                        className="form-control border-end-0"
                        placeholder="Password"
                        autoComplete="off"
                        onChange={(e: any) => {
                          setPasswordNotMatchErrorFlag(false);
                          setPasswordInput((prevData: any) => ({
                            ...prevData,
                            confirm_password: e.target.value
                          }));
                        }}

                      />
                      <span
                        className="input-group-text text-secondary bg-white border-start-0 cursor-pointer"
                        onClick={handleConfirmPasswordToggle}
                      >
                        {confirm_password == "password" ? (
                          <BsEye size={16} />
                        ) : (
                          <BsEyeSlash size={16} />
                        )}
                      </span>
                    </div>

                    {getPasswordInput?.confirm_password === "" && errFlag && (
                      <Label title={getConfirmPasswordErrorMessage} modeError={true} />
                    )}

                    {passwordNotMatchErrorFlag && errFlag && getPasswordInput?.confirm_password !== "" && (
                      <Label title={getConfirmPasswordErrorMessage} modeError={true} />
                    )}
                  </Form.Group>
                </Col>
              </Row>

              <Row className="w-100 pt-3">
                <Col lg={12} xs={12} className="mb-3 d-flex justify-content-center">
                  <Button
                    id="close-password-modal"
                    className="btn bg-danger border-0 mx-3"
                    type="button"
                    onClick={handleClose}
                  >
                    {('Cancel')}
                  </Button>

                  <Button
                    id="change-password-modal"
                    className="btn btn-accept mx-3"
                    type="button"
                    onClick={handleValidPassword}
                  >
                    {('Save')}
                  </Button>
                </Col>
              </Row>
            </Card.Body>
          </Card>
        </Modal.Body>
      </Modal>
    </>
  );
};
export default ProfileSettings;