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


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


const AddTicket = ({ open, onClose, onSave }: Props) => {
    const [profile, setProfile] = useState<string | null>(null);

    // ✅ Validation
    const validationSchema = Yup.object({
        asset_name: Yup.string().required("Asset Name is required"),
        category: Yup.string().required("Category is required"),
        room: Yup.string().required("Room is required"),
        date: Yup.string().required("Date is required"),
        ticket_name: Yup.string().required("Ticket Name is required"),
        issue: Yup.string().required("Issue is required"),
        reason: Yup.string().required("Reason is required"),
        reason_asset: Yup.string().required("Reason is required"),
        ticket_name_asset: Yup.string().required("Ticket Name is required"),
    });

    // ✅ Formik
    const formik = useFormik({
        initialValues: {
            asset_name: "",
            category:"",
            warranty:"",
            room :"",
            date:"",
            reason:"",
            ticket_name:"",
            issue:"",
            reason_asset:"",
            ticket_name_asset:""
        },
        validationSchema,
        onSubmit: (values) => {
            onSave(values);
            onClose();
        },
    });

    const [color, setColor] = useState("#3498db");

    const AssetsOption = [
        { value: "Industrial Sewing Machine", label: "Industrial Sewing Machine" },
        { value: "Cutting Table", label: "Cutting Table" },
        { value: "Iron Press Unit", label: "Iron Press Unit" },
    ];


    const [change , setChange] = useState("Faculty");

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

                    <button
                        onClick={() => formik.handleSubmit()}
                        className="btn btn-primary"
                        type="button"
                    >
                        Add Ticket
                    </button>
                </>
            }
        >
            <form className="grid grid-cols-12 gap-4">
                <div className="col-span-12 flex gap-5">
                    <label className="inline-flex">
                        <input  type="radio" name="type" value="Faculty"  className="form-radio peer" checked={change === "Faculty"} onChange={(e) => setChange(e.target.value)} />
                        <span className="peer-checked:text-primary">Faculty</span>
                    </label>
                    <label className="inline-flex">
                        <input type="radio" name="type" value="Damage" className="form-radio peer"  checked={change === "Damage"}  onChange={(e) => setChange(e.target.value)}/>
                        <span className="peer-checked:text-primary">Damaged Assets</span>
                    </label>
                </div>

                { change ==="Faculty" ? 
                    <div className="col-span-12">
                        <div className="grid grid-cols-12 gap-4">
                            <div className="col-span-12">
                                <label>Ticket Name</label>
                                <input
                                    name="ticket_name"
                                    className="form-input w-full"
                                    value={formik.values.ticket_name}
                                    onChange={formik.handleChange}
                                    onBlur={formik.handleBlur}
                                />
                                {formik.touched.ticket_name && formik.errors.ticket_name && (
                                    <p className="text-red-500 text-sm">{formik.errors.ticket_name}</p>
                                )}
                            </div>
                            <div className="col-span-12">
                                <label>Reason</label>
                                <textarea
                                    name="reason"
                                    rows={1}
                                    className="form-textarea w-full"
                                    value={formik.values.reason}
                                    onChange={formik.handleChange}
                                    onBlur={formik.handleBlur}
                                />
                                {formik.touched.reason && formik.errors.reason && (
                                    <p className="text-red-500 text-sm">{formik.errors.reason}</p>
                                )}
                            </div>
                        </div>
                    </div> : 
                    <div className="col-span-12">
                        <div className="grid grid-cols-12 gap-4">
                            <div className="col-span-12">
                                <label>Asset</label>
                                <Select
                                    options={AssetsOption}
                                    value={AssetsOption.find(o => o.value === formik.values.asset_name)}
                                    onChange={(val: any) => {
                                        formik.setFieldValue("asset_name", val.value);
                                        formik.setFieldTouched("asset_name", true);
                                    }}
                                />
                                {formik.touched.asset_name && formik.errors.asset_name && (
                                    <p className="text-red-500 text-sm">{formik.errors.asset_name}</p>
                                )}
                            </div>
                            <div className="col-span-12">
                                <label>Ticket Name</label>
                                <input
                                    name="ticket_name_asset"
                                    className="form-input w-full"
                                    value={formik.values.ticket_name_asset}
                                    onChange={formik.handleChange}
                                    onBlur={formik.handleBlur}
                                />
                                {formik.touched.ticket_name_asset && formik.errors.ticket_name_asset && (
                                    <p className="text-red-500 text-sm">{formik.errors.ticket_name_asset}</p>
                                )}
                            </div>
                            <div className="col-span-12">
                                <label>Reason</label>
                                <textarea
                                    name="reason"
                                    rows={1}
                                    className="form-textarea w-full"
                                    value={formik.values.reason_asset}
                                    onChange={formik.handleChange}
                                    onBlur={formik.handleBlur}
                                />
                                {formik.touched.reason_asset && formik.errors.reason_asset && (
                                    <p className="text-red-500 text-sm">{formik.errors.reason_asset}</p>
                                )}
                            </div>
                        </div>
                    </div>
                }
            </form>
        </Modal>
    );
};

export default AddTicket;