import styles from "./myProfileForm.module.scss";
import cx from "classnames";
import { Button, Form, Input, Modal, Select } from "antd";
import { FC, useState, useEffect } from "react";

import * as ProfileApi from "../../../pages/api/profile";
import * as CommonApi from "../../../pages/api/common";
import * as OtpApi from "../../../pages/api/otpVerification";
import ChangeFieldPage from "./changeField/changeFieldPage";
import _ from "lodash";
import Loading from "../../Loading";
import { baseUrl } from "../../../constants/urls";
import { useRouter } from "next/router";
const Option = Select.Option;
const MyProfileForm: FC<any> = () => {
  const router = useRouter();
  const [userData, setUserData] = useState<any>({});
  const [modalVisible, setModalVisible] = useState(false);
  const [firstname, setFirstName] = useState("");
  const [lastname, setLastName] = useState("");
  const [gender, setGender] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [companyName, setCompanyName] = useState("");
  const [gst, SetGst] = useState("");
  const [pan, SetPan] = useState("");
  const [alternativeNumber, setAlternativeNumber] = useState("");
  const [businessNumber, setBusinessNumber] = useState("");
  const [businessEmail, setBusinessEmail] = useState("");
  const [whatsappNumber, setWhatsappNumber] = useState("");
  const [companyUrl, setCompanyUrl] = useState("");
  const [id, setId] = useState(0);
  const [selectUser, setSelectUser] = useState("");
  const [loginRes, setLoginRes] = useState<any>({});
  const [type, setType] = useState("");
  const [newLabel, setNewLabel] = useState("");
  const [form] = Form.useForm();
  const [state, setState] = useState({
    isRouteChanging: false,
    loadingKey: 0,
  });
  useEffect(() => {
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
    setLoginRes(details);
    const params = details?.token;
    ProfileApi.getProfile(params).then((data) => setUserData(data));
  }, []);
  const [edit, setEdit] = useState(false);
  const [editType, setEditType] = useState("");
  const changeEditHandler = () => {
    setEdit(true);
    setEditType("Edit");
  };

  const nameEditPop = (name: any, type: any) => {

   
    const finalEmail = name.additionalEmails != null ? name.additionalEmails : name.email;
    setType(type);
    setFirstName(name.first_name);
    setLastName(name.last_name);
    setId(name.id);
    setGender(name.gender);
    setEmail(finalEmail);
    setPhone(name.phone);
    setCompanyName(name.company_name);
    SetGst(name.company_gst);
    SetPan(name.company_pan);
    setSelectUser(name.business_type);
    setAlternativeNumber(name.alternative_number);
    setWhatsappNumber(name.whatsapp_number);
    setBusinessEmail(name.business_email);
    setCompanyUrl(name.company_url);
    setBusinessNumber(name.business_number);
    form.setFieldsValue({
      email: finalEmail,
    })
    setTimeout(() => {
      setModalVisible(true);
    }, 500);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

 

  const updateProfile = () => {
   
    const token = loginRes?.token;
    handleRouteChangeStart();
    if (type == "email") {
      const params = {
        id: id,
        emails: email?.split(",")
      }
      CommonApi.postRequest(`${baseUrl}/api/customer/additional-emails`, params).then((res) => {
        
        handleRouteChangeEnd();
        ProfileApi.getProfile(token).then((data) => setUserData(data));
        setModalVisible(false);
      })
    } else {
      const params = {
        first_name: firstname,
        last_name: lastname,
        email: email,
        phone: phone,
        gender: gender,
        bussiness_type: selectUser,
        company_name: companyName,
        company_gst: gst,
        company_pan: pan,
        alternative_number: alternativeNumber,
        business_number: businessNumber,
        business_email: businessEmail,
        whatsapp_number: whatsappNumber,
        company_url: companyUrl,
        id: id,
      }; 

      ProfileApi.profileUpdate(params, token).then((res) => {
        // console.log(res);
        handleRouteChangeEnd();
        if(type=="phone" && phone!=userData?.data?.phone){
          localStorage.removeItem("loginDetails");
          localStorage.removeItem("PinCode");
          localStorage.removeItem("Citycode");
          localStorage.clear()
          router.push({
            pathname: `/home`,
          });
        }
        ProfileApi.getProfile(token).then((data) => setUserData(data));
        setModalVisible(false);
      });
    }
  };

  const handleRouteChangeStart = () => {
    setState((prevState) => ({
      ...prevState,
      isRouteChanging: true,
      loadingKey: prevState.loadingKey ^ 1,
    }));
  };
  const handleRouteChangeEnd = () => {
    setState((prevState) => ({
      ...prevState,
      isRouteChanging: false,
    }));
  };

  return (
    <>
    <div className={cx(styles.formContainer)}>
      <Loading isRouteChanging={state.isRouteChanging} key={state.loadingKey} />
      <div>
        {!edit ? (
          <div>
            <h1>My Profile</h1>

            {!_.isEmpty(userData) ? (
              <div className={cx(styles.cardContainer)}>
                <div className={cx(styles.cardStyle)}>
                  <div className="ant-row justify-between">
                    <div className="ant-col ant-col-xl-20 ant-col-md-20">
                      <span>Name</span>
                      <div className={cx(styles.fieldStyle)}>
                        {userData?.data?.first_name} {userData?.data?.last_name}
                      </div>
                    </div>
                    <div className="ant-col ant-col-xl-4 ant-col-md-4 flex items-center">
                      <Button
                        onClick={() => {
                          nameEditPop(userData?.data, "name");
                        }}
                      >
                        Edit
                      </Button>
                    </div>
                  </div>
                </div>
                <div className={cx(styles.cardStyle)}>
                  <div className="ant-row justify-between">
                    <div className="ant-col ant-col-xl-20 ant-col-md-20">
                      <span>Gender</span>
                      <div className={cx(styles.fieldStyle)}>
                        {userData?.data?.gender}
                      </div>
                    </div>
                    <div className="ant-col ant-col-xl-4 ant-col-md-4 flex items-center">
                      <Button
                        onClick={() => {
                          nameEditPop(userData?.data, "gender");
                        }}
                      >
                        Edit
                      </Button>
                    </div>
                  </div>
                </div>
                <div className={cx(styles.cardStyle)}>
                  <div className="ant-row justify-between">
                    <div className="ant-col ant-col-xl-20 ant-col-md-20">
                      <span>Email</span>
                      <div className={cx(styles.fieldStyle)}>
                        {userData?.data?.email}
                      </div>
                    </div>
                    <div className="ant-col ant-col-xl-4 ant-col-md-4 flex items-center">
                      <Button
                        onClick={() => {
                          nameEditPop(userData?.data, "email");
                        }}
                      >
                        Edit
                      </Button>
                    </div>
                  </div>
                </div>

                <div className={cx(styles.cardStyle)}>
                  <div className="ant-row justify-between">
                    <div className="ant-col ant-col-xl-20 ant-col-md-20">
                      <span>Mobile Phone Number</span>
                      <div className={cx(styles.fieldStyle)}>
                        {userData?.data?.phone}
                      </div>
                    </div>
                    <div className="ant-col ant-col-xl-4 ant-col-md-4 flex items-center">
                      <Button
                        onClick={() => {
                          nameEditPop(userData?.data, "phone");
                          setNewLabel("Phone Number");
                        }}
                      >
                        Edit
                      </Button>
                    </div>
                  </div>
                </div>
                <div className={cx(styles.cardStyle)}>
                  <div className="ant-row justify-between">
                    <div className="ant-col ant-col-xl-20 ant-col-md-20">
                      <span>Alternate Number</span>
                      <div className={cx(styles.fieldStyle)}>
                        {userData?.data?.alternative_number}
                      </div>
                    </div>
                    <div className="ant-col ant-col-xl-4 ant-col-md-4 flex items-center">
                      <Button
                        onClick={() => {
                          nameEditPop(userData?.data, "phone");
                          setNewLabel("Alternate Number");
                        }}
                      >
                        Edit
                      </Button>
                    </div>
                  </div>
                </div>
                <div className={cx(styles.cardStyle)}>
                  <div className="ant-row justify-between">
                    <div className="ant-col ant-col-xl-20 ant-col-md-20">
                      <span>WhatsApp Number</span>
                      <div className={cx(styles.fieldStyle)}>
                        {userData?.data?.whatsapp_number}
                      </div>
                    </div>
                    <div className="ant-col ant-col-xl-4 ant-col-md-4 flex items-center">
                      <Button
                        onClick={() => {
                          nameEditPop(userData?.data, "phone");
                          setNewLabel("WhatsApp Number");
                        }}
                      >
                        Edit
                      </Button>
                    </div>
                  </div>
                </div>
                {userData?.data?.company_name != "" ? (
                  <>
                    <div className={cx(styles.cardStyle)}>
                      <div className="ant-row justify-between">
                        <div className="ant-col ant-col-xl-20 ant-col-md-20">
                          <span>Company </span>
                          <div className={cx(styles.fieldStyle)}>
                            {userData?.data?.company_name}
                          </div>
                        </div>
                        <div className="ant-col ant-col-xl-4 ant-col-md-4 flex items-center">
                          {userData?.data?.company_name == "" || userData?.data?.company_name == null || userData?.data?.company_name == "null" ? <Button onClick={() => { nameEditPop(userData?.data, "company") }}>Edit</Button> : null}
                        </div>
                      </div>
                    </div>
                    <div className={cx(styles.cardStyle)}>
                      <div className="ant-row justify-between">
                        <div className="ant-col ant-col-xl-20 ant-col-md-20">
                          <span>Business Email</span>
                          <div className={cx(styles.fieldStyle)}>
                            {userData?.data?.business_email}
                          </div>
                        </div>
                        <div className="ant-col ant-col-xl-4 ant-col-md-4 flex items-center">
                          <Button onClick={() => { nameEditPop(userData?.data, "businessEmail") }}>Edit</Button>
                        </div>
                      </div>
                    </div>
                    <div className={cx(styles.cardStyle)}>
                      <div className="ant-row justify-between">
                        <div className="ant-col ant-col-xl-20 ant-col-md-20">
                          <span>Business Phone </span>
                          <div className={cx(styles.fieldStyle)}>
                            {userData?.data?.business_number}
                          </div>
                        </div>
                        <div className="ant-col ant-col-xl-4 ant-col-md-4 flex items-center">
                          <Button onClick={() => {
                            nameEditPop(userData?.data, "phone");
                            setNewLabel("Business Mobile Number");
                          }}>Edit</Button>
                        </div>
                      </div>
                    </div>
                    <div className={cx(styles.cardStyle)}>
                      <div className="ant-row justify-between">
                        <div className="ant-col ant-col-xl-20 ant-col-md-20">
                          <span>Company Url </span>
                          <div className={cx(styles.fieldStyle)}>
                            {userData?.data?.company_url}
                          </div>
                        </div>

                        <div className="ant-col ant-col-xl-4 ant-col-md-4 flex items-center">
                          <Button onClick={() => { nameEditPop(userData?.data, "companyUrl") }}>Edit</Button>
                        </div>
                      </div>
                    </div>
                    <div className={cx(styles.cardStyle)}>
                      <div className="ant-row justify-between">
                        <div className="ant-col ant-col-xl-20 ant-col-md-20">
                          <span>Company Gst</span>
                          <div className={cx(styles.fieldStyle)}>
                            {userData?.data?.company_gst}
                          </div>
                        </div>
                        <div className="ant-col ant-col-xl-4 ant-col-md-4 flex items-center">
                          {userData?.data?.company_gst == "" || userData?.data?.company_gst == null || userData?.data?.company_gst == "null" ? <Button onClick={() => { nameEditPop(userData?.data, "companyGst") }}>Edit</Button> : null}
                        </div>
                      </div>
                    </div>
                    <div className={cx(styles.cardStyle)}>
                      <div className="ant-row justify-between">
                        <div className="ant-col ant-col-xl-20 ant-col-md-20">
                          <span>Company Pan</span>
                          <div className={cx(styles.fieldStyle)}>
                            {userData?.data?.company_pan}
                          </div>
                        </div>
                        <div className="ant-col ant-col-xl-4 ant-col-md-4 flex items-center">
                          {userData?.data?.company_pan == "" || userData?.data?.company_pan == null || userData?.data?.company_pan == "null" ? <Button onClick={() => { nameEditPop(userData?.data, "companyPan") }}>Edit</Button> : null}
                        </div>
                      </div>
                    </div>
                  </>
                ) : null}
              </div>
            ) : null}
            <Modal
              visible={modalVisible}
              width={400}
              style={{ width: "50%" }}
              onOk={() => {
                setModalVisible(false);
              }}
              onCancel={() => {
                setModalVisible(false);
              }}
              footer={null}
              destroyOnClose={true}
              bodyStyle={{ height: "100%" }}
            >
              <Form
                name="normal_login"
                className="login-form"
                layout="vertical"
                initialValues={{ remember: true }}
                form={form}
                onFinish={updateProfile}
                onFinishFailed={onFinishFailed}
                autoComplete="on"
              >
                {type === "name" ? (
                  <span className={cx("ant-row")}>
                    <Form.Item
                      label="First Name"
                      className={cx("ant-col ant-col-xl-12")}
                    >
                      <Input
                        placeholder="Enter First Name"
                        value={firstname}
                        onChange={(evt) => {
                          setFirstName(evt.target.value);
                        }}
                      />
                    </Form.Item>
                    <Form.Item
                      label="Last Name"
                      className={cx(styles.formSpan, "ant-col ant-col-xl-12")}
                    >
                      <Input
                        placeholder="Enter Last Name"
                        value={lastname}
                        onChange={(evt) => {
                          setLastName(evt.target.value);
                        }}
                      />
                    </Form.Item>
                  </span>
                ) : type === "gender" ? (
                  <Form.Item
                    label="Gender"
                    className={cx(styles.formSpan, "ant-col ant-col-xl-24")}
                  >
                    <Select
                      value={gender}
                      placeholder="Select a option and change input text above"
                      onChange={(value) => setGender(value)}
                    >
                      <Option value="Male">Male</Option>
                      <Option value="Female">Female</Option>
                      <Option value="Prefer Not Say">Prefer Not Say</Option>
                    </Select>
                  </Form.Item>
                ) : type === "company" ? (
                  <Form.Item
                    label="Company Name"
                    className={cx(
                      "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-24"
                    )}
                    rules={[
                      { required: true, message: "Please Enter Company Name!" },
                    ]}
                  >
                    <Input
                      className={styles.formInput}
                      placeholder="Please Enter Your Company Name "
                      value={companyName}
                      onChange={(evt) => setCompanyName(evt.target.value)}
                    />
                  </Form.Item>
                ) : type === "gst" ? (
                  <Form.Item
                    rules={[
                      {
                        required: false,
                        message: "Please Enter GST Number!",
                      },
                      {
                        required: true,
                        pattern:
                          /^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/,
                        message: `Enter Valid GST Number!`,
                      },
                    ]}
                    label="GST Number"
                    className={cx(
                      "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-24 pr-3"
                    )}
                  >
                    <Input
                      maxLength={15}
                      className={styles.formInput}
                      placeholder="Please Enter GST Number"
                      value={gst}
                      onChange={(evt) => SetGst(evt.target.value)}
                    />
                  </Form.Item>
                ) : type === "pan" ? (
                  <Form.Item
                    rules={[
                      {
                        required: false,
                        message: "Please Enter Pan Number!",
                      },
                      {
                        required: true,
                        pattern: /[A-Z]{5}[0-9]{4}[A-Z]{1}$/,
                        message: `Enter Valid Pan Number`,
                      },
                    ]}
                    label="PAN Card"

                  >
                    <Input
                      maxLength={15}
                      className={styles.formInput}
                      placeholder="Please Enter a PAN"
                      value={pan}
                      onChange={(evt) => SetPan(evt.target.value)}
                    />
                  </Form.Item>
                ) : type === "email" ? (
                  <Form.Item
                    name="email"
                    rules={[
                      {
                        required: true,
                        message: `Enter Valid Mail Address`,

                      },

                    ]}
                    label="Email Address"
                    className={cx(
                      "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-24 pr-3"
                    )}
                  >
                    <Input
                      className={styles.formInput}
                      placeholder="Please Enter Email"
                      value={email}
                      onChange={(evt) => setEmail(evt.target.value)}
                    />
                  </Form.Item>
                ) : type === "phone" ? (
                  <Form.Item

                    rules={[
                      {
                        required: true,

                      },
                      {
                        pattern: /^[5-9][0-9]{9}$/,
                        message: `Enter Valid Phone Number`,
                      },
                    ]}
                    label={newLabel}
                    className={cx(
                      "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-24 pr-3"
                    )}
                  >
                    {newLabel === "Phone Number" ? (
                      <Input
                        maxLength={10}
                        type={"number"}
                        className={cx(styles.formInput, "numberInput")}
                        placeholder={`Please Enter ${newLabel}`}
                        value={phone}
                        onChange={(evt) => setPhone(evt.target.value)}
                      />
                    ) : newLabel === "Alternate Number" ? (
                      <Input
                        type={"number"}
                        maxLength={10}
                        className={cx(styles.formInput, "numberInput")}
                        placeholder={`Please Enter ${newLabel}`}
                        value={alternativeNumber}
                        onChange={(evt) =>
                          setAlternativeNumber(evt.target.value)
                        }
                      />
                    ) : newLabel === "Business Mobile Number" ? (
                      <Input
                        type={"number"}
                        maxLength={10}
                        className={cx(styles.formInput, "numberInput")}
                        placeholder={`Please Enter ${newLabel}`}
                        value={businessNumber}
                        onChange={(evt) =>
                          setBusinessNumber(evt.target.value)
                        }
                      />
                    ) : (
                      <Input
                        type={"number"}
                        maxLength={10}
                        className={cx(styles.formInput, "numberInput")}
                        placeholder={`Please Enter ${newLabel}`}
                        value={whatsappNumber}
                        onChange={(evt) => setWhatsappNumber(evt.target.value)}
                      />
                    )}
                  </Form.Item>
                ) : type == "company" ? <Form.Item
                  label="Company Website"
                  className={cx(
                    "ant-col ant-col-sm-24 ant-col-md-12 ant-col-xl-12",
                    styles.formItem
                  )}
                  rules={[
                    {
                      required: false,
                      message: "Please Enter Company url!",
                    },
                  ]}
                >
                  <Input
                    className={styles.formInput}
                    placeholder="Please Enter Your Company Website’s URL"
                    value={companyUrl}
                    onChange={(evt) => setCompanyUrl(evt.target.value)}
                  />
                </Form.Item> : type == "businessEmail" ? <Form.Item
                  name="businessEmailId"
                  label="Business Email Address"

                  rules={[
                    {
                      required: true,
                      message: "Please Enter Business Email Id!",
                    },
                  ]}
                >
                  <Input
                    className={styles.formInput}
                    placeholder="Please Enter a Business Email Address"
                    value={businessEmail}
                    onChange={(evt) => setBusinessEmail(evt.target.value)}
                  />
                </Form.Item> : type == "companyGst" ? <Form.Item
                  name="GST"
                  rules={[
                    {
                      required: false,
                      message: "Please Enter GST Number!",
                    },
                    {
                      required: false,
                      pattern:
                        /^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/,
                      message: `Enter Valid GST Number!`,
                    },
                  ]}
                  label="GST Number"

                >
                  <Input
                    maxLength={15}
                    className={styles.formInput}
                    placeholder="Please Enter a GST Number"
                    value={gst}
                    onChange={(evt) => SetGst(evt.target.value)}
                  />
                </Form.Item> : type == "companyPan" ?
                  <Form.Item
                    name="Pan"
                    rules={[
                      {
                        required: false,
                        message: "Please Enter Pan Number!",
                      },
                      {
                        required: false,
                        pattern: /[A-Z]{5}[0-9]{4}[A-Z]{1}$/,
                        message: `Enter Valid Pan Number`,
                      },
                    ]}
                    label="PAN Card"

                  >
                    <Input
                      maxLength={15}
                      className={styles.formInput}
                      placeholder="Please Enter a PAN"
                      value={pan}
                      onChange={(evt) => SetPan(evt.target.value)}
                    />
                  </Form.Item> : type == "companyUrl" ? <Form.Item
                    label="Company Website"

                    rules={[
                      {
                        required: false,
                        message: "Please Enter Company url!",
                      },
                    ]}
                  >
                    <Input
                      className={styles.formInput}
                      placeholder="Please Enter Your Company Website’s URL"
                      value={companyUrl}
                      onChange={(evt) => setCompanyUrl(evt.target.value)}
                    />
                  </Form.Item> : null}

                <Button type="primary" htmlType="submit">
                  Update
                </Button>
              </Form>
            </Modal>
          </div>
        ) : (
          <ChangeFieldPage
            type={editType}
            params={edit}
            email={email}
            phone={phone}
          />
        )}
      </div>
      </div>
      </>
  );
};

export default MyProfileForm;