"use client";

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


export function StepTwo({formik}: { formik: FormikProps<PatientStepTwoOnboardingValues> }) {

    return (
        <form className="flex flex-col gap-y-4" 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="employment_status"
                       className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    Employment Status*
                </label>
                <Select onValueChange={value => formik.setFieldValue("employment_status", value)} id="employment_status"
                        value={formik.values.employment_status}>
                    <SelectTrigger
                        className={`${Boolean(formik.touched.employment_status && formik.errors.employment_status) ? "border-red-500 form-input-error" : "form-input"}`}>
                        <SelectValue
                            placeholder="Select your current employment status"
                            className={"border-4 border-red-400"}/>
                    </SelectTrigger>
                    <SelectContent>
                        <SelectGroup>
                            <SelectItem value="C000">Student</SelectItem>
                            <SelectItem value="SE000">Self Employed</SelectItem>
                            <SelectItem value="CS000">Employed (civil servant)</SelectItem>
                            <SelectItem value="EP000">Employed (other)</SelectItem>
                            <SelectItem value="NE000">Not Employed</SelectItem>
                        </SelectGroup>
                    </SelectContent>
                </Select>
            </div>


            <div>

                <label htmlFor="relationship_status"
                       className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    Relationship Status*
                </label>
                <Select onValueChange={value => formik.setFieldValue("relationship_status", value)}
                        id="relationship_status"
                        value={formik.values.relationship_status}>
                    <SelectTrigger
                        className={`${Boolean(formik.touched.relationship_status && formik.errors.relationship_status) ? "border-red-500 form-input-error" : "form-input"}`}>
                        <SelectValue placeholder="Select your relationship status"/>
                    </SelectTrigger>
                    <SelectContent>
                        <SelectGroup>
                            <SelectItem value="single">Single</SelectItem>
                            <SelectItem value="in_a_relationship">In a relationship</SelectItem>
                            <SelectItem value="engaged">Engaged</SelectItem>
                            <SelectItem value="married">Married</SelectItem>
                            <SelectItem value="separated">Separated or Divorced</SelectItem>
                            <SelectItem value="other">Other</SelectItem>
                        </SelectGroup>
                    </SelectContent>
                </Select>
            </div>


            <Button className="w-full" type={"submit"}>
                Continue
            </Button>

        </form>
    )
}