import { Button, Checkbox, Form, Select, Spin, notification } from "antd";
import { FC, useEffect, useState } from "react";
import styles from "./userCreation.module.scss";
import cx from "classnames"
import FormInput from "../../../sellerLanding/common/FormInput";
import { baseUrl } from "../../../../constants/urls";
const { Option } = Select;
import * as CommonAPi from "../../../../pages/api/common";
import {
    LoadingOutlined 
  } from "@ant-design/icons";
import type { CheckboxValueType } from 'antd/es/checkbox/Group';
import { useRouter } from "next/router";
import { useMediaQuery } from "react-responsive";
const antIcon = <LoadingOutlined style={{ fontSize: "26px" }} spin />;
const UserEdit: FC<any> = ({ backeditOption, userEditData }) => {
    const isMobile = useMediaQuery({ maxWidth: 767.68 });
    const [form] = Form.useForm();
    const [roleArray, setRoleArray] = useState([]);
    const [accessRole, setAccessRole] = useState<any>([]);
    const [role, setRole] = useState("");
    const [options, setOptions] = useState([]);
    const [loadingSpin, setLoadingSpin] = useState(false);
    const router = useRouter();
    useEffect(() => {
        CommonAPi.getRequest(`${baseUrl}/api/customer/roles`).then((res) => {

            setRoleArray(res?.data?.data)
        })
        const newArray: any = [];
        CommonAPi.getRequest(`${baseUrl}/api/customer/role-permissions/${userEditData?.role?.id}`).then((res) => {

            setAccessRole(res?.data?.data?.permissions);

            res?.data?.data?.permissions.forEach((element: any) => {
                const objectData = {
                    label: element, value: element
                }
                newArray.push(objectData)
            });
            setOptions(newArray);

        })
        setAccessRole(userEditData?.role?.assigned_access.length>0?userEditData?.role?.assigned_access:userEditData?.role?.permissions)
        setRole(userEditData?.role?.id)
        
        form.setFieldsValue({
            role: userEditData?.role?.id
        });
        form.setFieldsValue({
            access: userEditData?.role?.assigned_access.length>0?userEditData?.role?.assigned_access:userEditData?.role?.permissions
        });
    }, []);

    const onChange = (checkedValues: CheckboxValueType[]) => {
         console.log('checked = ', checkedValues);
        // setAccessRole(checkedValues)
    };

    form.setFieldsValue({
        firstName: userEditData?.first_name
    });
    form.setFieldsValue({
        lastName: userEditData?.last_name
    });
    form.setFieldsValue({
        email: userEditData?.email
    });
    form.setFieldsValue({
        phoneNumber: userEditData?.phone
    });

    const onReqCallbackClick = (formData: any) => {
        setLoadingSpin(true)
        if(formData?.access?.length>0){
            const params = {
                first_name: formData.firstName,
                last_name: formData.lastName,
                email: formData.email,
                phone: formData.phoneNumber,
                role_id: formData.role,
                access:formData.access
            };
    
            CommonAPi.putRequest(`${baseUrl}/api/customer/user/update/${userEditData?.id}`,params).then((res)=>{
                setLoadingSpin(false);
                // router.reload();
                backeditOption();
            })
        }else{
            notification.error({message:"Please Select At Least One Role Access"});
            setLoadingSpin(false)
        }
        

    }
    const validateMessages = {
        required: "Please enter your ${label}!",
    };


    return (
        <>
            <div className={styles.myUserContainer}>
                <div className="flex justify-between">
                    <h1 className={styles.headerTitle}>User Edit</h1>
                    <Button type="primary" ghost onClick={backeditOption}>User List</Button>
                </div>
                <Form form={form}
                    name="basic"
                    autoComplete="on"
                    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,
                                },
                            ]}
                            style={{ marginRight: isMobile?0:"1em"  }}
                        >
                            <FormInput
                                label="First Name"
                                placeholder="First Name"
                                name="First Name"
                                type="text"
                                required="true"
                                inputType="Text"
                                readOnly={true}
                            />
                        </Form.Item>

                        <Form.Item
                            className={cx(styles.inputContainer)}
                            name="lastName"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <FormInput
                                label="Last Name"
                                placeholder="Last Name"
                                name="First Name"
                                type="text"
                                required="true"
                                inputType="Text"
                                readOnly={true}
                            />
                        </Form.Item>
                    </div>
                    <div className={cx(styles.inputRow)}>
                        <Form.Item
                            name="phoneNumber"
                            className={cx(styles.inputContainer)}
                            rules={[
                                {
                                    required: true,
                                },
                                {
                                    type: "string",
                                    min: 10,
                                    max: 10,
                                },
                            ]}
                            style={{ marginRight: isMobile?0:"1em"  }}
                        >
                            <FormInput
                                label="Phone Number"
                                placeholder="Phone No."
                                name="phone"
                                type="number"
                                required="true"
                                inputType="Number"
                                readOnly={true}
                            />
                        </Form.Item>
                        <Form.Item
                            name="email"
                            className={cx(styles.inputContainer)}
                            rules={[
                                { required: true },
                                {
                                    type: "email",
                                    pattern:
                                        /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/,
                                    message: `Please enter valid e-mail address`,
                                },
                            ]}
                        >
                            <FormInput
                                label="Email"
                                placeholder="E-mail Address"
                                name="email"
                                type="email"
                                required="true"
                                inputType="Text"
                                readOnly={true}
                            />
                        </Form.Item>
                    </div>

                    <div className={cx(styles.inputRow)}>
                        <Form.Item
                            name="role"
                            label="Select 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
                        label="Role Access"
                            name="access"
                            className={cx(styles.inputContainer,"ml-2")}
                            style={{width:"100%"}}
                        >
                            <Checkbox.Group options={options} defaultValue={accessRole} onChange={onChange} />
                        </Form.Item>
                    </div>
                    <Button
                        type="primary"
                        htmlType="submit"
                        style={{ height: 40, width: 150, marginTop: "1em" }}
                    >
                        Update User
                    </Button>
                </Form>
                <Spin indicator={antIcon} spinning={loadingSpin} className={"loaderContainer"} />
            </div>
        </>
    )

}

export default UserEdit;