"use client";

import {FormikProps} from "formik";
import {Button} from "@/components/ui/button";
import {SelectContent, SelectItem, SelectTrigger, Select, SelectGroup, SelectValue} from "@/components/ui/select";
import {
    PatientStepThreeOnboardingValues
} from "@/app/(auth)/onboarding/_patients/index";
import {Input} from "@/components/ui/input";


export function StepThree({formik}: { formik: FormikProps<PatientStepThreeOnboardingValues> }) {

    return (
        <form className="flex flex-col gap-y-6" onSubmit={formik.handleSubmit}>
            {/*<h1 className="mb-5 text-xl md:text-3xl font-bold text-gray-700 dark:text-white">*/}
            {/*    Setup your profile*/}
            {/*</h1>*/}

            <div>

                <label htmlFor="current_medication_specify"
                       className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    Are you under any medication currently?
                </label>
                <Select onValueChange={value => formik.setFieldValue("current_medication_specify", value === "yes")}
                        id="current_medication_specify"
                        value={formik.values.current_medication_specify ? "yes" : "no"}
                        disabled={formik.isSubmitting}>
                    <SelectTrigger
                        className={`${Boolean(formik.touched.current_medication_specify && formik.errors.current_medication_specify) ? "border-red-500 form-input-error" : "form-input"}`}>
                        <SelectValue
                            placeholder="Specify current medications.."
                            className={"border-4 border-red-400"}/>
                    </SelectTrigger>
                    <SelectContent>
                        <SelectGroup>
                            <SelectItem value="yes">Yes (specify)</SelectItem>
                            <SelectItem value="no">No</SelectItem>
                        </SelectGroup>
                    </SelectContent>
                </Select>

                {
                    formik.values.current_medication_specify &&
                    <Input
                        id="current_medication"
                        name="current_medication"
                        type="type"
                        value={formik.values.current_medication}
                        placeholder="Enter medications....."
                        className={`mt-2 ${Boolean(formik.touched.current_medication && formik.errors.current_medication) ? "border-red-500 form-input-error" : "form-input"}`}
                        onChange={formik.handleChange} onBlur={formik.handleBlur} disabled={formik.isSubmitting}/>
                }
            </div>


            <div>

                <label htmlFor="medical_conditions_specify"
                       className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    Do you have any previous injuries, illness or any medical conditions?
                </label>
                <Select onValueChange={value => formik.setFieldValue("medical_conditions_specify", value === "yes")}
                        id="medical_conditions_specify"
                        value={formik.values.medical_conditions_specify ? "yes" : "no"}
                        disabled={formik.isSubmitting}>
                    <SelectTrigger
                        className={`${Boolean(formik.touched.medical_conditions_specify && formik.errors.medical_conditions_specify) ? "border-red-500 form-input-error" : "form-input"}`}>
                        <SelectValue
                            placeholder="Specify previous medical conditions.."
                            className={"border-4 border-red-400"}/>
                    </SelectTrigger>
                    <SelectContent>
                        <SelectGroup>
                            <SelectItem value="yes">Yes (specify)</SelectItem>
                            <SelectItem value="no">No</SelectItem>
                        </SelectGroup>
                    </SelectContent>
                </Select>

                {
                    formik.values.medical_conditions_specify &&
                    <Input
                        id="medical_conditions"
                        name="medical_conditions"
                        type="type"
                        value={formik.values.medical_conditions}
                        placeholder="Enter previous medical conditions....."
                        className={`mt-2 ${Boolean(formik.touched.medical_conditions && formik.errors.medical_conditions) ? "border-red-500 form-input-error" : "form-input"}`}
                        onChange={formik.handleChange} onBlur={formik.handleBlur} disabled={formik.isSubmitting}/>
                }
            </div>


            <div>

                <label htmlFor="preferred_language_specify"
                       className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    Which language do you prefer for communication?
                </label>
                <Select onValueChange={async (value) => {
                    await formik.setFieldValue("preferred_language", value)
                    await formik.setFieldValue("preferred_language_specify", value === "other")
                }} id="preferred_language_specify"
                        value={formik.values.preferred_language_specify ? "other" : formik.values.preferred_language}
                        disabled={formik.isSubmitting}>
                    <SelectTrigger
                        className={`${Boolean(formik.touched.preferred_language_specify && formik.errors.preferred_language_specify) ? "border-red-500 form-input-error" : "form-input"}`}>
                        <SelectValue
                            placeholder="Specify current medications.."
                            className={"border-4 border-red-400"}/>
                    </SelectTrigger>
                    <SelectContent>
                        <SelectGroup>
                            <SelectItem value="siswati">SiSwati</SelectItem>
                            <SelectItem value="english">English</SelectItem>
                            <SelectItem value="other">Other (specify)</SelectItem>
                        </SelectGroup>
                    </SelectContent>
                </Select>

                {
                    formik.values.preferred_language_specify &&
                    <Input
                        id="preferred_language"
                        name="preferred_language"
                        type="text"
                        value={formik.values.preferred_language}
                        placeholder="Enter preferred language....."
                        className={`mt-2 ${Boolean(formik.touched.preferred_language && formik.errors.preferred_language) ? "border-red-500 form-input-error" : "form-input"}`}
                        onChange={formik.handleChange} onBlur={formik.handleBlur} disabled={formik.isSubmitting}/>
                }
            </div>

            <Button className="w-full" type={"submit"}>
                Save and Proceed
            </Button>

        </form>
    )
}