'use client';
import { useEffect, useState } from "react";
import {
  Breadcrumb,
  Row,
  Col,
  Card,
  Button,
  Form,
  Modal
} from "react-bootstrap";
import { toast } from "react-toastify";
import { Access, RolesDropDown, UserFormData } from '../interface';
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import { BsEye, BsEyeSlash } from "react-icons/bs";
import { useTranslation } from "react-i18next";
import { useParams } from "next/navigation";
import WebService from "@/Services/WebService";
import HelperService from "@/Services/HelperService";
import CommonFunction from "@/Services/CommonFunction";
import CompoLoader from "@/Common/ComponentLoader/CompoLoader";
import { Label } from "@/Common/Label/Label";
import PageTitle from "@/Common/PageTitle";

const AddEditDetail = () => {
  const [compoLoader, setCompoLoader] = useState<boolean>(false);
  const [getAccess, setAccess] = useState<Access>({});
  const [getBreadcrumb, setBreadcrumb] = useState<string>("Add Admin User");
  const [icon, setIcon] = useState<any>(BsEyeSlash);
  const [type, setType] = useState<string>("password");
  const [getConfirmPasswordErrorMessage, setConfirmPasswordErrorMessage] = useState<string>("Please enter confirm password");
  const [confirm_password, setConfirmPassword] = useState<string>("password");
  const [errFlag, setErrFlag] = useState<boolean>(false);
  const [errEmailFlag, setEmailErrFlag] = useState<boolean>(false);
  const { t } = useTranslation();
  const [getDropdown, setDropdown] = useState<RolesDropDown[]>([]);
  const [getFormData, setFormData] = useState<UserFormData>({
    name: "",
    email: "",
    password: "",
    mobile_number: "",
    dial_code: "",
    country_code: "",
    status: "ACTIVE",
    role_id: ""
  });
  const [errNewPasswordFlag, setErrNewPasswordFlag] = useState(false);
  const [passwordNotMatchErrorFlag, setPasswordNotMatchErrorFlag] = useState(false)
  const [getNewPasswordErrorMessage, setNewPasswordErrorMessage] = useState<string>("Please enter new password");
  const [show, setShow] = useState(false);
  const [resetPassword, setResetPassword] = useState({
    password: "",
    confirm_password: ""
  })
  const { id } = useParams();

  useEffect(() => {
    rolesDropDown();
    if (id) {
      getAddEditDetail(id);
      setBreadcrumb("Edit Admin User");
    }
  }, [id]);

  const getAddEditDetail = (param: any) => {
    setCompoLoader(true);
    return WebService.CommonApi({
      method: "GET",
      action: `admin/user/${param}`,
      body: null,
    })
      .then((res: any) => {
        setFormData((prev: UserFormData) => ({
          ...prev,
          name: res?.info?.name,
          email: res?.info?.email,
          mobile_number: res?.info?.mobile_number,
          dial_code: res?.info?.dial_code,
          country_code: res?.info?.country_code,
          is_operator: res?.info?.status,
          role_id: res?.info?.role?.id
          // user_type: res?.info?.user_type,
        }));
        if (res?.access) {
          let obj: Access = {
            can_create: res?.access?.can_create,
            can_delete: res?.access?.can_delete,
            can_read: res?.access?.can_read,
            can_update: res?.access?.can_update,
            can_has_view_access: res?.access?.can_has_view_access,
          };
          setAccess(obj);
        }
        setCompoLoader(false);
      })
      .catch((error: any) => {
        toast.error(error.response);
        setCompoLoader(false);
      });
  };

  const validateEmail = (email: string) => {
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
    let isValid = emailRegex.test(email);
    console.log(isValid, "is Valid");
    if (isValid) {
      setEmailErrFlag(false);
      return false;
    } else {
      setEmailErrFlag(true);
      return true;
    }
  };

  const handleSubmit = () => {
    let Flag = false;

    let excluded = ["password"];
    if (HelperService.checkEmptyUndefinedNull(id)) {
      console.log("routeParam.uuid", excluded);
      Flag = CommonFunction.checkFormEmptyFields(getFormData, excluded);
    } else {
      Flag = CommonFunction.checkFormEmptyFields(getFormData);
    }
    if (Flag) {
      setErrFlag(true);
      return;
    } else {
      setErrFlag(false);
    }
    let email = validateEmail(getFormData?.email);
    if (email) {
      return;
    }
    if (HelperService.checkEmptyUndefinedNull(id)) {
      submitDetails(`admin/user/${id}`, "PUT", getFormData);
    } else {
      submitDetails(`admin/user`, "POST", getFormData);
    }
  };

  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 submitDetails = (uri: string, method: string, data: UserFormData) => {
    WebService.addLoader("save-form-btn");
    WebService.CommonApi({
      method: method,
      action: uri,
      body: data,
    }).then((res: any) => {
      WebService.removeLoader("save-form-btn");
      if (res?.status) {
        toast.success(res?.message);
        window.history.back();
      } else {
        toast.error(res?.message);
      }
    }).catch((error: any) => {
      WebService.removeLoader("save-form-btn");
      toast.error(error?.response?.data?.message);
    });
  }

  const rolesDropDown = () => {
    return WebService.CommonApi({
      method: "GET",
      action: "admin/roles-dd",
      body: null,
    })
      .then((res: any) => {
        if (res?.list.length > 0) {
          let roleList = res?.list.map((item: any) => {
            return {
              label: item?.role_name,
              id: item?.id
            }
          });
          setDropdown(roleList);
        }
        return res?.roles;
      })
      .catch((error: any) => {
        toast.error(error?.response?.data?.message);
      });
  };

  const handleClose = () => {
    setShow(false);
    setErrFlag(false);
  };

  const handleChangePassword = () => {
    WebService.addLoader("change-password-modal");
    WebService.CommonApi({
      method: "PUT",
      action: `user/password/${id}/set`,
      body: { password: resetPassword.password }
    }).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 handleValidPassword = () => {
    let flag = false;
    flag = CommonFunction.checkFormEmptyFields(resetPassword);

    let newPasswordMessage = CommonFunction.passwordValidation(resetPassword?.password || "");
    if (newPasswordMessage === false) {
      flag = true;
      setErrNewPasswordFlag(true);
      setNewPasswordErrorMessage(t('please_enter_valid_password'))
    }

    if (resetPassword?.confirm_password) {
      if (resetPassword?.password !== resetPassword?.confirm_password) {
        flag = true;
        setPasswordNotMatchErrorFlag(true);
        setConfirmPasswordErrorMessage(t('password_not_match'));
      }
    }

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

  return (
    <>
      {compoLoader ? (
        <CompoLoader />
      ) : (
        <div className="page-properties pb-3">
          <div className="nb-3">
            <Breadcrumb>
              <Breadcrumb.Item href="/manage-admin-user">{" Admin Users"}</Breadcrumb.Item>
              <Breadcrumb.Item active>
                {getBreadcrumb}
              </Breadcrumb.Item>
            </Breadcrumb>
          </div>
          <Row className=" mb-lg-4 mb-3">
            <Col lg={8} xs={8}>
              <div className="d-flex gap-3 align-items-center">
                <PageTitle
                  title={getBreadcrumb}
                  backArrow={true}
                />
              </div>
            </Col>
          </Row>
          <Card className="card-style mb-lg-4 mb-3">
            <Card.Header>
              <h4 className="card-title text-white">{getBreadcrumb} </h4>
            </Card.Header>
            <Card.Body>
              <Row className="w-100" >
                <Col lg={4} xs={4} className="mb-0">
                  <Form.Group className="mb-3">
                    <Form.Label className="form-label">
                      Name {" "} <span className="text-danger">*</span>
                    </Form.Label>
                    <Form.Control type="text" placeholder="Enter Name" value={getFormData?.name || ""} onChange={(e: any) => {
                      setFormData((prevData: UserFormData) => ({
                        ...prevData,
                        name: e.target.value
                      }));
                    }
                    } />
                    {getFormData?.name == "" && errFlag ? (
                      <Label title="Please enter name" modeError={true} />
                    ) : (
                      ""
                    )}
                  </Form.Group>
                </Col>
                <Col lg={4} xs={4} className="mb-0">
                  <label className="form-label">Phone Number <span className="text-danger">*</span></label>
                  <PhoneInput
                    country={"in"}
                    value={
                      getFormData?.dial_code +
                      getFormData?.mobile_number || ""
                    }
                    onChange={(p, phone: any, __) => {
                      console.log(phone);

                      console.log("phone.countryCode", phone.countryCode)
                      let mobile = HelperService.removeDialCodeFromMobile(
                        p,
                        phone.dialCode
                      );
                      setFormData((preLoad: UserFormData) => {
                        return {
                          ...preLoad,
                          mobile_number: mobile,
                          dial_code: "+" + phone.dialCode,
                          country_code: phone.countryCode,
                        };
                      });

                      console.log(mobile, "phone number");
                    }}
                  />
                  {getFormData?.mobile_number === "" && errFlag ? (
                    <Label
                      title="Please enter mobile number"
                      modeError={true}
                    />
                  ) : (
                    ""
                  )}
                </Col>
                <Col lg={4} xs={4}>
                  <Form.Group className="mb-3">
                    <Form.Label className="form-label required">
                      Email Id {" "} <span className="text-danger">*</span>
                    </Form.Label>
                    <Form.Control type="text" placeholder="Enter Email" name="user_email" autoComplete="off" value={getFormData?.email || ""} onChange={(e: any) => {
                      setFormData((prevData: UserFormData) => ({
                        ...prevData,
                        email: e.target.value
                      }));
                    }
                    } />
                    {getFormData?.email == "" && errFlag ? (
                      <Label title="Please enter email" modeError={true} />
                    ) : (
                      ""
                    )}
                    {getFormData?.email !== "" && errEmailFlag ? (
                      <Label title="Please enter valid email" modeError={true} />
                    ) : (
                      ""
                    )}
                  </Form.Group>
                </Col>
                <Col lg={4} xs={4} className="mb-3" >
                  <Form.Group>
                    <Form.Label className="form-label required">
                      Password {" "} <span className="text-danger">*</span>
                    </Form.Label>
                    <div className="input-group mb-2">
                      <input
                        type={type}
                        value={getFormData?.password || ""}
                        className="form-control border-end-0"
                        placeholder="Password"
                        autoComplete="off"
                        onChange={(e: any) => {
                          setFormData((prevData: UserFormData) => ({
                            ...prevData,
                            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>
                    {getFormData?.password == "" && errFlag ? (
                      <Label title="Please enter password" modeError={true} />
                    ) : (
                      ""
                    )}
                  </Form.Group>
                </Col>
                <Col lg={4} xs={4}>
                  <Form.Group className="mb-3">
                    <Form.Label className="form-label">
                      Role {" "} <span className="text-danger">*</span>
                    </Form.Label>
                    <Form.Select value={getFormData?.role_id || ""} onChange={(e: any) => {
                      setFormData((prevData: UserFormData) => ({
                        ...prevData,
                        role_id: e.target.value
                      }))
                    }} aria-label="Default select example">
                      <option defaultValue="" disabled={getFormData?.role_id !== ""}>Select Role</option>
                      {getDropdown && getDropdown.length > 0 && getDropdown.map((item: RolesDropDown) => {
                        return (
                          <option value={item?.id} key={item?.id}>{item?.label}</option>
                        )
                      })}
                    </Form.Select>
                    {getFormData?.role_id == "" && errFlag && (
                      <Label title="Please select role" modeError={true} />
                    )}
                  </Form.Group>
                </Col>
                <Col lg={4} xs={6} className="mb-3">
                  <label className="form-label required">Status</label>
                  <Form.Check type="switch" id="active" checked={getFormData?.status == "ACTIVE" ? true : false} onChange={(e: any) => {
                    setFormData((prePlan: any) => { return { ...prePlan, status: e.target.checked ? "ACTIVE" : "INACTIVE" } });
                  }}
                    label="" />
                </Col>
              </Row>
              {/* <Row>
                {HelperService.checkEmptyUndefinedNull(id) && (
                  <Col lg={12} xs={12} className="mb-3 d-flex justify-content-end">
                    <Button
                      id="save-form-btn1"
                      className="btn btn-brand"
                      type="button"
                      onClick={handleShow}
                    >
                      Change Password
                    </Button>
                  </Col>
                )}
              </Row> */}
              <Row className="w-100">
                <Col lg={12} xs={12} className="mb-0">
                  <Button
                    id="save-form-btn"
                    className="btn btn-brand"
                    type="button"
                    onClick={handleSubmit}
                  >
                    Save
                  </Button>
                </Col>
              </Row>
            </Card.Body>
          </Card>

          <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">

                <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">
                          Password {" "} <span className="text-danger">*</span>
                        </Form.Label>
                        <div className="input-group mb-2">
                          <input
                            type={type}
                            value={resetPassword?.password || ""}
                            className="form-control border-end-0"
                            placeholder="Password"
                            autoComplete="off"
                            onChange={(e: any) => {

                              setErrNewPasswordFlag(false);
                              setResetPassword((prev: any) => ({
                                ...prev,
                                password: e.target.value
                              }))

                              // const password = e.target.value;
                              // let message = CommonFunction.passwordValidation(password);
                              // if (message == false) {
                              //   setErrFlag(true);
                              //   setPasswordErrorMessage("Password should contain at least 8 characters, one uppercase, one lowercase, one number and one special case character")
                              // } else {
                              //   setErrFlag(false);
                              //   setPasswordErrorMessage("Please enter password");
                              // }
                              // setPasswordInput((prevData: PasswordInput) => ({
                              //   ...prevData,
                              //   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>
                        {((resetPassword?.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={resetPassword?.confirm_password || ""}
                            className="form-control border-end-0"
                            placeholder="Password"
                            autoComplete="off"
                            onChange={(e: any) => {

                              const confirmPassword = e.target.value;
                              setPasswordNotMatchErrorFlag(false);
                              setResetPassword((prev: any) => ({
                                ...prev,
                                confirm_password: confirmPassword
                              }))

                              //   const confirmPassword = e.target.value;
                              //   const password = getPasswordInput?.password;
                              //   if (password !== confirmPassword) {
                              //     console.log("Password does not match", password, confirmPassword);
                              //     setErrConfirmPasswordFlag(true);
                              //     setConfirmPasswordErrorMessage("Confirm password does not match with password field");
                              //   } else {
                              //     setErrConfirmPasswordFlag(false);
                              //     setConfirmPasswordErrorMessage("Please enter confirm password");
                              //   }

                              //   setPasswordInput((prevData: PasswordInput) => ({
                              //     ...prevData,
                              //     confirm_password: confirmPassword
                              //   }));
                            }}

                          />
                          <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>
                        {resetPassword.confirm_password == "" && errFlag && (
                          <Label title={getConfirmPasswordErrorMessage} modeError={true} />
                        )}
                        {passwordNotMatchErrorFlag && errFlag && (
                          <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>
        </div>
      )}
    </>
  );
};
export default AddEditDetail;