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


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

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

    //  Validation
   const validationSchema = Yup.object({
        outcomes: Yup.string().required("Priority is required"),
        date_time: Yup.string().required("Date time is require"),
        title_name: Yup.string().required("Title is require"),
        mode:Yup.string().required("Mode is require"),
    });

    //  Formik
    const formik = useFormik({
        initialValues: {
            outcomes:"",
            description:"",
            Comments:"",
            title_name:"",
            date_time:"",
            mode:"",
        },
        validationSchema,
        onSubmit: (values) => {
            onSave(values);
            onClose();
        },
    });

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


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

    const [checkbox ,setCheckbox] = useState(false);

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

                    <button
                        onClick={() => formik.handleSubmit()}
                        className="btn btn-primary"
                        type="button"
                    >
                        Mark As Completed
                    </button>
                </>
            }
        >
            <div className="grid grid-cols-12 gap-4">
                <div className="col-span-12 flex justify-between items-center">
                    <label className="text-gray-500">Lead</label>
                    <label className="text-black">Nithish Kumar N</label>
                </div>
                <div className="col-span-12">
                    <div className="border rounded bg-blue-50 p-4 flex flex-col">
                        <label className="text-semibold text-blue-800 mb-0">Follow - Up Summary</label>
                        <label className="text-semibold text-blue-800 mb-0 text-sm">Documents What Happend During This Follow-Up And Plan Your Next Action</label>
                    </div>
                </div>
                <div className="col-span-12">
                    <form className="grid grid-cols-12 gap-4">
                         <div className="col-span-12">
                            <label>Outcomes</label>
                            <Select
                                options={outcomesOptions}
                                value={outcomesOptions.find(o => o.value === formik.values.outcomes)}
                                onChange={(val: any) => {
                                    formik.setFieldValue("outcomes", val.value);
                                    formik.setFieldTouched("outcomes", true);
                                }}
                            />
                            {formik.touched.outcomes && formik.errors.outcomes && (
                                <p className="text-red-500 text-sm">{formik.errors.outcomes}</p>
                            )}
                        </div>
                        <div className="col-span-12">
                            <label>Comments</label>
                            <textarea
                                name="Comments"
                                rows={1}
                                className="form-textarea w-full"
                                value={formik.values.Comments}
                                onChange={formik.handleChange}
                                onBlur={formik.handleBlur}
                            />
                        </div>
                        <div className="col-span-12">
                            <label className="inline-flex">
                                <input type="checkbox" className="form-checkbox" onClick={()=>setCheckbox(prev => !prev)}/>
                                <span className="cursor-pointer">Schedule Next Follow Up Now</span>
                            </label>
                        </div>

                        {checkbox &&
                        <div className="col-span-12">
                            <div className="grid grid-cols-12 gap-3">
                                <div className="col-span-12">
                                    <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-12">
                                    <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-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>
                                <div className="col-span-12">
                                    <label>Due Date & Time</label>
                                    <DateTimePicker
                                        value={formik.values.date_time ?? null}
                                        onChange={(val) => {
                                            formik.setFieldValue("date_time", val);
                                            formik.setFieldTouched("date_time", true);
                                        }}
                                        placeholder="Pick date & time"
                                    />
                                    {formik.touched.date_time && formik.errors.date_time && (
                                        <p className="text-red-500 text-sm">{formik.errors.date_time}</p>
                                    )}
                                </div>
                            </div>
                        </div>
                        }

                    </form>
                </div>
            </div>
        </Modal>
    );
};

export default UpdateStatus;