"use client";

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


export function StepOne({formik}: { formik: FormikProps<PatientStepOneOnboardingValues> }) {

    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="age"
                       className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    Your Age*
                </label>
                <Select onValueChange={value => formik.setFieldValue("age", value)} id="age" value={formik.values.age}>
                    <SelectTrigger
                        className={`${Boolean(formik.touched.age && formik.errors.age) ? "border-red-500 form-input-error" : "form-input"}`}>
                        <SelectValue placeholder="Select your age" className={"border-4 border-red-400"}/>
                    </SelectTrigger>
                    <SelectContent>
                        <SelectGroup>
                            <SelectItem value="below-18">Below 18</SelectItem>
                            <SelectItem value="18-25">18 - 25</SelectItem>
                            <SelectItem value="above-25">Above 25</SelectItem>
                        </SelectGroup>
                    </SelectContent>
                </Select>
            </div>


            <div>

                <label htmlFor="gender"
                       className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    Gender*
                </label>
                <Select onValueChange={value => formik.setFieldValue("gender", value)} id="gender"
                        value={formik.values.gender}>
                    <SelectTrigger
                        className={`${Boolean(formik.touched.gender && formik.errors.gender) ? "border-red-500 form-input-error" : "form-input"}`}>
                        <SelectValue placeholder="Select your gender"/>
                    </SelectTrigger>
                    <SelectContent>
                        <SelectGroup>
                            <SelectItem value="Male">Male</SelectItem>
                            <SelectItem value="Female">Female</SelectItem>
                            <SelectItem value="Other">Prefer not to say</SelectItem>
                        </SelectGroup>
                    </SelectContent>
                </Select>
            </div>


            <div>

                <label htmlFor="location"
                       className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    Your location*
                </label>
                <Select onValueChange={value => formik.setFieldValue("location", value)}
                        id="location" value={formik.values.location}>
                    <SelectTrigger className={`${Boolean(formik.touched.location && formik.errors.location) ? "border-red-500 form-input-error" : "form-input"}`}>
                        <SelectValue placeholder="Select your location"/>
                    </SelectTrigger>
                    <SelectContent>
                        <SelectGroup>
                            <SelectItem value="manzini">Manzini</SelectItem>
                            <SelectItem value="hhohho">Hhohho</SelectItem>
                            <SelectItem value="shiselweni">Shiselweni</SelectItem>
                            <SelectItem value="lubombo">Lubombo</SelectItem>
                            <SelectItem value="other">Other</SelectItem>
                        </SelectGroup>
                    </SelectContent>
                </Select>

            </div>

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

        </form>
    )
}