import { useFormik } from "formik";
import * as Yup from "yup";
import Modal from "../../components/Modals";
import Select from "../../components/Select";
import Datepicker from "../../components/Datepicker";
import Timepicker from "../../components/Timepicker";

interface Props {
    open: boolean;
    onClose: () => void;
    onSave: (data: any) => void;
    batchId: number | null;
}

const AddStudent = ({ open, onClose, onSave }: Props) => {

    const studentOptions = [
        { label: "Priya Sharma", value: "STU001" },
        { label: "Rahul Kumar", value: "STU002" },
        { label: "Anjali Verma", value: "STU003" },
        { label: "Karthik Raj", value: "STU004" },
        { label: "Meena Lakshmi", value: "STU005" },
    ];
    //  Validation
    const validationSchema = Yup.object({
        stud_name: Yup.string().required("Student name is required"),
    });

    //  Formik
    const formik = useFormik({
        initialValues: {
            stud_name: "",
        },
        validationSchema,
        onSubmit: (values) => {
            onSave(values);
            onClose();
        },
    });

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="Add Student"
            footer={
                <>
                    <button onClick={onClose} className="btn btn-outline-danger" type="button">
                        Cancel
                    </button>

                    <button onClick={() => formik.handleSubmit()} className="btn btn-primary" type="button">
                        Add Student
                    </button>
                </>
            }
        >
            <form className="grid grid-cols-1 md:grid-cols-1 gap-4">
                <div>
                    <label>Students</label>
                    <Select
                        options={studentOptions}
                        isMulti
                        value={studentOptions.find(o => o.value === formik.values.stud_name)}
                        onChange={(val: any) => formik.setFieldValue("stud_name", val.value)}
                    />
                </div>
            </form>
        </Modal>
    );
};

export default AddStudent;