import React, {useEffect, useState} from "react";
import { Link, usePage } from "@inertiajs/inertia-react";
import { Form, Divider, message, ConfigProvider } from "antd";
import InputSelect from "../../../Components/Common/Form/InputSelect";
import Input from "../../../Components/Common/Form/Input";
import InputDatePicker from "../../../Components/Common/Form/InputDatePicker";
import PhoneNumber from "../../../Components/Common/PhoneNumber";
import { useTranslation } from "react-i18next";
import { confirmRule } from "../../../Constants/validationRules";
import PasswordInput from "../../../Components/Common/Form/PasswordInput";
import Button from "../../../Components/Common/Button";
import KnowledgeLogo from "../../../../assets/knowledgeLogo.svg";
import LanguageDropdown from "../../../Components/Common/LanguageDropdown";
import moment from "moment";
import TermsAndConditions from "../../../Components/Student/Auth/TermsAndConditions";
import { Inertia } from "@inertiajs/inertia";
import { formatErrors } from "../../../Constants/globals";
import Logo from "../../../../assets/logo-5.svg";

function RegisterStudent() {
    const { isRTL = false } = usePage().props;
    const { t } = useTranslation();

    // states
    const [isTermsModalVisible, setIsTermsModalVisible] = useState(false);
    const [loading, setLoading] = useState(false);

    const toggleTermsModal = () => {
        setIsTermsModalVisible(!isTermsModalVisible);
    };
    const [data, setData] = useState({});
    const [form] = Form.useForm();

    // api call to register student
    const onFinish = (values) => {
        toggleTermsModal();
        setData(values);
    };

    const handleSubmit = (values) => {
        Inertia.post(
            route("student.register.create"),
            { ...data, ...values, dob: data.dob.format("YYYY-MM-DD") },
            {
                onStart: () => {
                    setLoading(true);
                },
                onSuccess: () => {
                    message.success(t("Registration  Successful"));
                    form.resetFields();
                },
                onError: (errors) => {
                    toggleTermsModal();
                    form.setFields(formatErrors(errors));
                },
                onFinish: () => {
                    setLoading(false);
                },
            }
        );
    };

    const direction = isRTL ? "rtl" : "ltr";
    useEffect(() => {
        document.title = t("Register");
    }, []);
    return (
        <>
            <ConfigProvider direction={direction}>
                <div dir={direction}>
                    <div dir={direction} className="row  gx-0 gy-0">
                        {/* <ChangePasswordModal/> */}
                        <div className="col-5 registration-container bg-white border-color d-flex justify-content-center align-items-center">
                            <div className="translation-wrapper d-none">
                                <LanguageDropdown />
                            </div>
                            <div className="logo-div d-none">
                                <img src={Logo} alt="logo" />

                                <p className="color-light-white f-24">
                                    {t("Knowledge International University")}
                                </p>
                            </div>
                            <div className="student-registration">
                                <h1 className="f-18 fw-600">
                                    {t("Online Registration Form")}
                                </h1>
                                <div className="registeration-content">
                                    <p>
                                        {t("Already have an account?")}
                                        <Link
                                            className="pl-16"
                                            href={route("student.login")}
                                        >
                                            {t("Log in")}
                                        </Link>
                                    </p>
                                    <Divider className="mt-32 mb-60 " />
                                    <Form
                                        layout="vertical"
                                        className="mb-20"
                                        initialValues={{ dob: moment() }}
                                        form={form}
                                        onFinish={onFinish}
                                    >
                                        <div className="row pb-6">
                                            <div className="col-12 col-sm-4 mb-24">
                                                <InputSelect
                                                    width="100%"
                                                    name="title"
                                                    label={t("Title")}
                                                    options={[
                                                        {
                                                            label: t("Mr"),
                                                            value: "Mr",
                                                        },
                                                        {
                                                            label: t("Mrs"),
                                                            value: "Mrs",
                                                        },
                                                        {
                                                            label: t("Ms"),
                                                            value: "Ms",
                                                        },
                                                    ]}
                                                    className="mr-16 mb-sm-0"
                                                />
                                            </div>
                                            <div className="col-12 col-sm-8">
                                                <Input
                                                    name="fullName"
                                                    label={t("Full name")}
                                                    placeholder={t("Name here")}
                                                    width="100%"
                                                    height={34}
                                                />
                                            </div>
                                        </div>
                                        <div className="row mb-24">
                                            <div className="col-sm-4 col-12 mb-24 mb-sm-0">
                                                <InputSelect
                                                    name="gender"
                                                    label={t("Gender")}
                                                    placeholder={t(
                                                        "Select Gender"
                                                    )}
                                                    width="100%"
                                                    options={[
                                                        {
                                                            label: t("Male"),
                                                            value: 0,
                                                        },
                                                        {
                                                            label: t("Female"),
                                                            value: 1,
                                                        },
                                                        // {
                                                        //     label: t("Other"),
                                                        //     value: 2,
                                                        // },
                                                    ]}
                                                    className="mr-16"
                                                />
                                            </div>
                                            <d2iv className="col-sm-8 col-12">
                                                <InputDatePicker
                                                    name="dob"
                                                    label={t("Date of Birth")}
                                                    height={34}
                                                    width="55%"
                                                />
                                            </d2iv>
                                        </div>
                                        <div className="phone-number">
                                            <Form.Item
                                                name={"phoneNumber"}
                                                label={t("Phone Number")}
                                            >
                                                <PhoneNumber
                                                    setPhoneNumber={(e) =>
                                                        form.setFieldsValue({
                                                            phoneNumber: e,
                                                        })
                                                    }
                                                    placeholder={t(
                                                        "Enter your Phone"
                                                    )}
                                                />
                                            </Form.Item>
                                        </div>

                                        <div>
                                            <Input
                                                width="70%"
                                                type="email"
                                                label={t("Email address")}
                                                name="email"
                                                placeholder={t(
                                                    "Enter your email"
                                                )}
                                            />
                                        </div>

                                        <div className="row pt-16">
                                            <div className="col-12 col-sm-6">
                                                <PasswordInput
                                                    width="100%"
                                                    name="newPassword"
                                                    label={t("Password")}
                                                    placeholder={t(
                                                        "Enter password"
                                                    )}
                                                />
                                            </div>
                                            <div className="col-12 col-sm-6">
                                                <PasswordInput
                                                    width="100%"
                                                    name="confirmPassword"
                                                    label={t(
                                                        "Confirm Password"
                                                    )}
                                                    placeholder={t(
                                                        "Confirm password"
                                                    )}
                                                    rules={confirmRule(
                                                        t(
                                                            "The password do not match!"
                                                        ),
                                                        "newPassword"
                                                    )}
                                                />
                                            </div>
                                        </div>
                                        <Button
                                            htmlTpye="submit"
                                            title={t("Register")}
                                            background="#08884A"
                                            color="#FFFFFF"
                                            height={40}
                                            borderWidth={0}
                                            className="w-100 mt-80"
                                            loading={loading}
                                        />
                                    </Form>
                                </div>
                            </div>
                            <div className="footer-sm d-none px-5 ">
                                <div className="text-center">
                                    <div className="align-items-center ">
                                        <h3 className="pb-10  f-24 fw-600 color-light-white">
                                            {t("Learn from the best Scholars")}
                                        </h3>
                                        <p className="f-14 fw-300 color-light-white">
                                            {t(
                                                "international array of leading scholars of high repute to supervise and deliver academically sound curricula in the various traditional disciplines of learning."
                                            )}
                                        </p>
                                        <p className=" f-25 fw-600 color-light-white">
                                            {t(
                                                "For any help or query contact us"
                                            )}
                                            admindep@kiu.org
                                        </p>
                                    </div>
                                </div>
                                <div className="footer-continer d-flex justify-content-between px-3 align-text-center">
                                    <div>
                                        <h3 className=" f-25 fw-600 color-light-white">
                                            {t("Website")}
                                        </h3>
                                        <p className="color-light-blue">
                                            www.kiu.org
                                        </p>
                                    </div>
                                    <div>
                                        <h3 className=" f-25 fw-600 color-light-white">
                                            {t("LMS portal")}
                                        </h3>
                                        <p className="color-light-blue">
                                            www.kiu/lms.org
                                        </p>
                                    </div>
                                </div>
                                <div>
                                    <p className="f-14 fw-300 color-light-white pt-4 text-center">
                                        {t("All rights reserved")} ©
                                        {t(
                                            "Knowledge international University"
                                        )}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div className="col-7 student-registration-div">
                            <div className="admin-auth-container d-flex flex-column  justify-content-between">
                                <div className="translation-wrapper pt-20">
                                    <LanguageDropdown />
                                </div>
                                <div className="text-center">
                                    <div className="ptlr-142 align-items-center">
                                        <div className="pb-28">
                                            <img src={KnowledgeLogo} alt="" />
                                        </div>
                                        <h1 className="pb-56 f-24 fw-500 color-light-white">
                                            {t(
                                                "Knowledge International University"
                                            )}
                                        </h1>
                                        <h3 className="pb-10  f-24 fw-600 color-light-white">
                                            {t("Learn from the best Scholars")}
                                        </h3>
                                        <p className="f-14 fw-300 color-light-white">
                                            {t(
                                                "international array of leading scholars of high repute to supervise and deliver academically sound curricula in the various traditional disciplines of learning."
                                            )}
                                        </p>
                                    </div>
                                </div>
                                <div className="footer-continer d-flex justify-content-between  px-3 align-text-center pt-126 pl-74">
                                    <div>
                                        <h3 className="text-white">
                                            {t("Website")}
                                        </h3>
                                        <p className="color-light-blue">
                                            www.kiu.org
                                        </p>
                                    </div>
                                    <div>
                                        <h3 className="text-white">
                                            {t("LMS portal")}
                                        </h3>
                                        <p className="color-light-blue">
                                            www.kiu/lms.org
                                        </p>
                                    </div>
                                    <div>
                                        <p className="color-light-blue pt-4">
                                            {t("All rights reserved")} ©
                                            {t(
                                                "Knowledge international University"
                                            )}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* terms modal */}
                        {isTermsModalVisible && (
                            <TermsAndConditions
                                data={data}
                                isModalVisible={isTermsModalVisible}
                                handleCancel={toggleTermsModal}
                                handleSubmit={handleSubmit}
                            />
                        )}
                    </div>
                    ٖ
                </div>
            </ConfigProvider>
        </>
    );
}

export default RegisterStudent;