import { useFormik } from "formik";
import { useState, useEffect } from "react";
import * as Yup from "yup";
import Modal from "../../components/Modals";
import FileDropzone from "../../components/FileDropzone";
import Datepicker from "../../components/Datepicker";

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

const AddAssignment = ({ open, onClose, onSave }: Props) => {
    const [loading, setLoading] = useState(false);

    const validationSchema = Yup.object({
        type: Yup.string().required("Type is required"),
        title: Yup.string().required("Title is required"),
        description: Yup.string().required("Description is required"),
    });

    const formik = useFormik({
        initialValues: {
            type: "",
            title: "",
            description: "",
            file: null as File | null,
        },
        validationSchema,
        onSubmit: async (values) => {
            setLoading(true);
            const result = await onSave(values);

                formik.resetForm();
                onClose();

            setLoading(false);
        },
    });

    if (!open) return null;

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="Add Assignment"
            maxWidth="max-w-xl"
            footer={
                <>
                    <button onClick={onClose} className="btn btn-outline-danger" type="button" disabled={loading}>
                        Cancel
                    </button>
                    <button onClick={() => formik.handleSubmit()} className="btn btn-primary" type="button" disabled={loading}>
                        {loading ? 'Saving...' : 'Save'}
                    </button>
                </>
            }
        >
            <form className="space-y-4">
                {/* Radio */}
                <div>
                    <label className="block mb-1">Assignment Type <span className='text-danger'>*</span></label>
                    <div className="flex gap-5">
                        <label className="inline-flex items-center gap-2 cursor-pointer">
                            <input
                                type="radio"
                                name="type"
                                value="test"
                                className="form-radio"
                                checked={formik.values.type === "test"}
                                onChange={formik.handleChange}
                            />
                            <span className={formik.values.type === "test" ? "text-primary" : ""}>Test</span>
                        </label>
                        <label className="inline-flex items-center gap-2 cursor-pointer">
                            <input
                                type="radio"
                                name="type"
                                value="project"
                                className="form-radio"
                                checked={formik.values.type === "project"}
                                onChange={formik.handleChange}
                            />
                            <span className={formik.values.type === "project" ? "text-primary" : ""}>Project</span>
                        </label>
                    </div>
                    {formik.touched.type && typeof formik.errors.type === "string" && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.type}</p>
                    )}
                </div>

                {/* Title */}
                <div>
                    <label>Title <span className='text-danger'>*</span></label>
                    <input
                        name="title"
                        className="form-input w-full"
                        value={formik.values.title}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        disabled={loading}
                    />
                    {formik.touched.title && typeof formik.errors.title === "string" && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.title}</p>
                    )}
                </div>

                {/* Description */}
                <div>
                    <label>Description <span className='text-danger'>*</span></label>
                    <textarea
                        name="description"
                        rows={3}
                        className="form-textarea w-full"
                        value={formik.values.description}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        disabled={loading}
                    />
                    {formik.touched.description && typeof formik.errors.description === "string" && (
                        <p className="text-red-500 text-sm mt-1">{formik.errors.description}</p>
                    )}
                </div>



                {/* File Upload */}
                <div>
                    <label className="block mb-2">Upload File</label>
                    <FileDropzone
                        value={formik.values.file}
                        onChange={(file: File | null) => formik.setFieldValue("file", file)}
                        accept=".pdf,.doc,.docx,.xlsx,.xls,.csv,.jpg,.png"
                        disabled={loading}
                    />
                </div>
            </form>
        </Modal>
    );
};

export default AddAssignment;