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 { useState } from "react";
import Timepicker from "../../components/Timepicker";



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

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

    // ✅ Validation
    const validationSchema = Yup.object({
        title_name: Yup.string().required("Title is required"),
        priority: Yup.string().required("Priority is required"),
        connect:Yup.string().required("Connection is require"),
        date:Yup.string().required("Date is require"),
        time:Yup.string().required("Time is require"),
        mode:Yup.string().required("Mode is require"),
    });

    // ✅ Formik
    const formik = useFormik({
        initialValues: {
            title_name: "",
            priority:"",
            connect:"",
            mode:"",
            date:"",
            time:"",
            description: "",
        },
        validationSchema,
        onSubmit: (values) => {
            onSave(values);
            onClose();
        },
    });

    const priorityOption = [
        { value: "High", label: "High" },
        { value: "Medium", label: "Medium" },
        { value: "Low", label: "Low" },
    ];


    const modeOption = [
        { value: "Call", label: "Call" },
        { value: "WhatsApp", label: "WhatsApp" },
        { value: "Visit", label: "Visit" },
    ];


    const LinkToLead = [
        { value: "Gokul K", label: "Gokul K" },
        { value: "Seshanand K", label: "Seshanand K" },
    ];

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

                    <button
                        onClick={() => formik.handleSubmit()}
                        className="btn btn-primary"
                        type="button"
                    >
                        Add Reminder
                    </button>
                </>
            }
        >
            <form className="grid grid-cols-12 gap-4">
                <div className="col-span-6">
                    <label>Title</label>
                    <input
                        name="title_name"
                        className="form-input w-full"
                        value={formik.values.title_name}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                    />
                    {formik.touched.title_name && formik.errors.title_name && (
                        <p className="text-red-500 text-sm">{formik.errors.title_name}</p>
                    )}
                </div>
                <div className="col-span-6">
                    <label>Mode</label>
                    <Select
                        options={modeOption}
                        value={modeOption.find(o => o.value === formik.values.mode)}
                        onChange={(val: any) => {
                            formik.setFieldValue("Mode", val.value);
                            formik.setFieldTouched("Mode", true);
                        }}
                    />
                    {formik.touched.mode && formik.errors.mode && (
                        <p className="text-red-500 text-sm">{formik.errors.mode}</p>
                    )}
                </div>
                <div className="col-span-6">
                    <label>Priority</label>
                    <Select
                        options={priorityOption}
                        value={priorityOption.find(o => o.value === formik.values.priority)}
                        onChange={(val: any) => {
                            formik.setFieldValue("priority", val.value);
                            formik.setFieldTouched("priority", true);
                        }}
                    />
                    {formik.touched.priority && formik.errors.priority && (
                        <p className="text-red-500 text-sm">{formik.errors.priority}</p>
                    )}
                </div>
                <div className="col-span-6">
                    <label>Link To Lead</label>
                    <Select
                        options={LinkToLead}
                        value={LinkToLead.find(o => o.value === formik.values.connect)}
                        onChange={(val: any) => {
                            formik.setFieldValue("Link To Lead", val.value);
                            formik.setFieldTouched("Link To Lead", true);
                        }}
                    />
                    {formik.touched.connect && formik.errors.connect && (
                        <p className="text-red-500 text-sm">{formik.errors.connect}</p>
                    )}
                </div>

                <div className="col-span-6">
                    <label>Date</label>
                    <Datepicker
                        value={formik.values.date ?? undefined}
                        onChange={(val) => {
                            formik.setFieldValue("date", val);
                            formik.setFieldTouched("date", true);
                        }}
                        placeholder="Pick date"
                    />
                    {formik.touched.date && formik.errors.date && (
                        <p className="text-red-500 text-sm">{formik.errors.date}</p>
                    )}
                </div>

                <div className="col-span-6">
                    <label>Time</label>
                    <Timepicker
                        value={formik.values.time ?? undefined}
                        onChange={(val) => {
                            formik.setFieldValue("time", val);
                            formik.setFieldTouched("time", true);
                        }}
                        placeholder="Pick time"
                    />
                    {formik.touched.date && formik.errors.time && (
                        <p className="text-red-500 text-sm">{formik.errors.time}</p>
                    )}
                </div>
                
                <div className="col-span-12">
                    <label>Description</label>
                    <textarea
                        name="Description"
                        rows={1}
                        className="form-textarea w-full"
                        value={formik.values.description}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                    />
                </div>
            </form>
        </Modal>
    );
};

export default AddReminder;