import { FC, useEffect, useRef, useState } from "react";
import styles from "./userCreation.module.scss";
import { Button, Form, Input, Select, Spin, notification } from "antd";
import FormInput from "../../../sellerLanding/common/FormInput";
import cx from "classnames";
import ReCAPTCHA from "react-google-recaptcha";
import * as CommonAPi from "../../../../pages/api/common"
import { baseUrl } from "../../../../constants/urls";
import { useRouter } from "next/router";
const { Option } = Select;
import {
    LoadingOutlined 
  } from "@ant-design/icons";
import { useMediaQuery } from "react-responsive";
import { emailRegx, passwordMsg } from "../../../../constants/errorMessages";
  const antIcon = <LoadingOutlined style={{ fontSize: "26px" }} spin />;
const UserCreation: FC<any> = ({backOption}) => {
    const isMobile = useMediaQuery({ maxWidth: 767.68 });
    const [form] = Form.useForm();
    const captchaRef = useRef<any>("");
    const [verified, setVerified] = useState(false);
    const [password, setPassword] = useState("");
    const [confirmPassword, setConfirmPassword] = useState("");
    const [role, setRole] = useState("");
    const [roleArray, setRoleArray] = useState([]);
    const [loginRes, setLoginRes] = useState<any>({});
    const router = useRouter();
    const [loadingSpin, setLoadingSpin] = useState(false);

    useEffect(() => {

        const val: any = localStorage.getItem("loginDetails");
        const details = JSON.parse(val);
        setLoginRes(details);
        CommonAPi.getRequest(`${baseUrl}/api/customer/roles`).then((res) => {
            // console.log(res, "res");
            setRoleArray(res?.data?.data)
        })
    }, [])
    const validateMessages = {
        required: "Please enter your ${label}!",
    };

    const onReqCallbackClick = (formData: any) => {
        setLoadingSpin(true);
        const params = {
            first_name: formData.firstName,
            last_name: formData.lastName,
            email: formData.email,
            phone: formData.phoneNumber,
            role_id: formData.role,
            customer_id: loginRes?.data?.id,
            password: formData.password
        };

        const token = captchaRef?.current?.getValue();
        CommonAPi.postRequest(`${baseUrl}/api/customer/user/create`, params).then((res)=>{
            //  console.log(res,"res");
             if(res?.status==false){
                setLoadingSpin(false);
                const key = Object.keys(res.message)[0];
                notification.error({ message: res.message[key] });
               
                
             }else{
            notification.success({message:res?.data?.message});
            form.resetFields();
            captchaRef?.current?.reset();
            setLoadingSpin(false);
            // router.reload();
            backOption();
             }
        })
    }

    const VerifyCaptcha = (value: any) => {
        setVerified(true);
    };

  

    return (
        <>
            <div className={styles.myUserContainer}>
            <div className="flex justify-between">
                <h1 className={styles.headerTitle}>User Creation</h1>
                <Button type="primary" ghost onClick={backOption}>User List</Button>
                </div>
             
                <Form form={form}
                    name="basic"
                    layout="vertical"
                    initialValues={{ remember: true }}
                    onFinish={onReqCallbackClick}
                    validateMessages={validateMessages}>
                    <div className={cx(styles.inputRow)}>
                        <Form.Item
                            className={cx(styles.inputContainer)}
                            name="firstName"
                            rules={[{
                                required: true,
                                 message: "Please Enter First Name!",
                              },
                              {
                                pattern: /^[a-zA-Z][a-zA-Z ]+$/,
                                message:"Please enter only alphabets in the First Name!"
                              },
                              {
                                min: 3,
                                max: 32,
                                message: 'First name  must be between 3 and 50 characters.',
                              },
                              ]}
                            style={{ marginRight: isMobile?0:"1em" }}
                        >
                            <FormInput
                                label="First Name"
                                placeholder="First Name"
                                name="First Name"
                                type="text"
                                required="true"
                                inputType="Text"
                            />
                        </Form.Item>

                        <Form.Item
                            className={cx(styles.inputContainer)}
                            name="lastName"
                            rules={[{
                                required: true,
                                 message: "Please Enter Last Name!",
                              },
                              {
                                pattern: /^[a-zA-Z][a-zA-Z ]+$/,
                                message:"Please enter only alphabets in the Last Name!"
                              }
                             
                              ]}
                        >
                            <FormInput 
                                label="Last Name"
                                placeholder="Last Name"
                                name="First Name"
                                type="text"
                                required="true"
                                inputType="Text"
                            />
                        </Form.Item>
                    </div>
                    <div className={cx(styles.inputRow)}>
                        <Form.Item
                            name="phoneNumber"
                            className={cx(styles.inputContainer)}
                            rules={[
                                {
                                  required: true,message:"Plese Enter Phone Number"
                                },
        
                                {
                                 
                                  pattern: /^[5-9][0-9]{9}$/,
                                  message: `Enter Valid Phone Number`,
                                },
                              ]}
                            style={{ marginRight: isMobile?0:"1em" }}
                        >
                            <FormInput
                                label="Phone Number"
                                placeholder="Phone No."
                                name="phone"
                                type="number"
                                required="true"
                                inputType="Number"
                            />
                        </Form.Item>
                        <Form.Item
                            name="email"
                            className={cx(styles.inputContainer)}
                            rules={[

                                { required: true,message:"Please Enter Mail Address"},
                                {
                                 
                                  pattern: emailRegx,
                                  message: `Enter Valid Mail Address`,
                                },
                                {
                                  max: 200,
                                  message: 'Email  must be between 200 characters.',
                                },
                              ]}
                        >
                            <FormInput
                                label="Email"
                                placeholder="E-mail Address"
                                name="email"
                                type="email"
                                required="true"
                                inputType="Text"
                            />
                        </Form.Item>
                    </div>
                    <div className={cx(styles.inputRow)}>
                        <Form.Item
                            name="password"
                            className={cx(styles.inputContainer)}
                            rules={[
                                {
                                  required: true,
                                  pattern: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-])(?!\s).{8,}$/,
                                  message: passwordMsg + "   Ex : Johney@1",
                                }
                              ]}
                            style={{ marginRight: isMobile?0:"1em" }}
                        >
                            <FormInput
                                label="Password"
                                placeholder="Password"
                                name="password"

                                required="true"
                                inputType="Password"
                            />
                        </Form.Item>
                        <Form.Item
                            name="confirm_password"
                            className={cx(styles.inputContainer)}
                            rules={[
                                {
                                    required: true,
                                    message: "Please Enter Confirm Password!",
                                },
                                ({ getFieldValue }) => ({
                                    validator(_, value) {
                                        if (!value || getFieldValue("password") === value) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject(
                                            new Error(
                                                "The two passwords that you entered do not match!"
                                            )
                                        );
                                    },
                                }),
                            ]}
                        >
                            <FormInput
                                label="Confirm Password"
                                placeholder="Confirm Password"
                                name="confirm_password"

                                required="true"
                                inputType="Password"
                            />
                        </Form.Item>
                    </div>
                    <div className={cx(styles.inputRow)}>
                        <Form.Item
                            name="role"
                            // extra="We must make sure that your are a human."
                            rules={[
                                {
                                    required: true,
                                    message: "Please Select Role",
                                },
                            ]}
                            style={{width:"100%"}}
                        >
                            <Select
                                placeholder="Select Role"
                                className={styles.inputBusiness}
                                onChange={(evt) => setRole(evt)}
                            >
                                {roleArray?.map((data: any, idx: number) => {
                                    return (
                                        <Option value={data.id} key={idx}>{data.name}</Option>
                                    )
                                })}
                                {/* <Option value={1}>I am an Individual Buyer</Option>
                  <Option value={2}>I am a Service Engineer</Option>
                  <Option value={3}>I am a Business</Option> */}
                            </Select>

                        </Form.Item>
                    </div>
                    <div className={cx(styles.inputRow)}>
                    <Form.Item
                        name="Captcha"
                        // extra="We must make sure that your are a human."
                        rules={[
                            {
                                required: true,
                                message: "Please verify the captcha",
                            },
                        ]}
                        style={{width:"100%"}}
                    >
                        <ReCAPTCHA
                            sitekey={"6LdqKsImAAAAAK9lbh_bxe5RYToQvRzDT2TxItP5"}
                            onChange={VerifyCaptcha}
                            ref={captchaRef}
                        />
                    </Form.Item>
                    </div>
                    <div className={cx(styles.inputRow)}>
                    <Button
                        type="primary"
                        htmlType="submit"
                        style={{ height: 40, width: 150, marginTop: "1em" }}
                    >
                        Add User
                    </Button>
                    </div>
                </Form>
                <Spin indicator={antIcon} spinning={loadingSpin} className={"loaderContainer"} />
            </div>
        </>
    )
}

export default UserCreation;