"use client"
import * as React from "react"
import PlateInput, { EMPTY_PLATE, isPlate, type PlateValue } from "@/components/plate-input"
import { Button } from "@/components/ui/button"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import {
Field,
FieldDescription,
FieldGroup,
FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
export default function LicensePlateVehicleForm() {
const [plate, setPlate] = React.useState<PlateValue>(EMPTY_PLATE)
const [vehicleType, setVehicleType] = React.useState("sedan")
const complete = isPlate(plate)
return (
<Card>
<CardHeader>
<CardTitle>ثبت خودرو</CardTitle>
<CardDescription>
مشخصات خودرو و پلاک را برای افزودن به حساب وارد کنید
</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={(event) => event.preventDefault()}>
<FieldGroup>
<Field>
<FieldLabel htmlFor="vehicle-title">عنوان خودرو</FieldLabel>
<Input
id="vehicle-title"
placeholder="پژو ۲۰۷ سفید"
required
/>
</Field>
<Field>
<FieldLabel htmlFor="vehicle-type">نوع خودرو</FieldLabel>
<Select
items={[
{ value: "sedan", label: "سواری" },
{ value: "suv", label: "شاسیبلند" },
{ value: "van", label: "ون" },
{ value: "truck", label: "باری" },
]}
value={vehicleType}
onValueChange={(value) =>
setVehicleType((value as string) ?? "sedan")
}
>
<SelectTrigger id="vehicle-type" className="w-full">
<SelectValue placeholder="انتخاب نوع" />
</SelectTrigger>
<SelectContent dir="rtl">
<SelectGroup>
<SelectItem value="sedan">سواری</SelectItem>
<SelectItem value="suv">شاسیبلند</SelectItem>
<SelectItem value="van">ون</SelectItem>
<SelectItem value="truck">باری</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</Field>
<Field>
<FieldLabel htmlFor="plate-03">پلاک خودرو</FieldLabel>
<div className="flex justify-center py-1">
<PlateInput
id="plate-03"
value={plate}
onChange={(next) => setPlate(next)}
/>
</div>
<FieldDescription>
پلاک باید کامل و مطابق کارت خودرو باشد
</FieldDescription>
</Field>
<Button type="submit" className="w-full" disabled={!complete}>
افزودن خودرو
</Button>
</FieldGroup>
</form>
</CardContent>
</Card>
)
}