import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { XCircle } from "lucide-react";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { DateTimePicker } from "@/components/ui/date-time-picker";
import { FormValues } from "./schema";
import { Label } from "@/components/ui/label";

const FormAddNewLivingSpace = ({ form, onSubmit, deleteAllSelections }: { form: any, onSubmit: (data: FormValues) => void, deleteAllSelections: () => void }) => {
    return <>
        <Card className="m-7">
            <CardContent className="pt-6">
                <Form {...form}>
                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                        <div className="grid grid-cols-3 gap-4">
                            <FormField
                                control={form.control}
                                name="buildID"
                                render={({ field }) => (
                                    <FormItem className="mt-3">
                                        <FormLabel>Build ID</FormLabel>
                                        <FormControl>
                                            <Label {...field} >{field.value ? field.value : "Not Selected"}</Label>
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                            <FormField
                                control={form.control}
                                name="collectionToken"
                                render={({ field }) => (
                                    <FormItem className="mt-3">
                                        <FormLabel>Collection Token</FormLabel>
                                        <FormControl>
                                            <Label {...field} >{field.value ? field.value : "Not Selected"}</Label>
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                            <FormField
                                control={form.control}
                                name="userTypeID"
                                render={({ field }) => (
                                    <FormItem className="mt-3">
                                        <FormLabel>User Type ID</FormLabel>
                                        <FormControl>
                                            <Label {...field} >{field.value ? field.value : "Not Selected"}</Label>
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                            <FormField
                                control={form.control}
                                name="partID"
                                render={({ field }) => (
                                    <FormItem className="mt-3">
                                        <FormLabel>Part ID</FormLabel>
                                        <FormControl>
                                            <Label {...field} >{field.value ? field.value : "Not Selected"}</Label>
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                            <FormField
                                control={form.control}
                                name="companyID"
                                render={({ field }) => (
                                    <FormItem className="mt-3">
                                        <FormLabel>Company ID</FormLabel>
                                        <FormControl>
                                            <Label {...field} >{field.value ? field.value : "Not Selected"}</Label>
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                            <FormField
                                control={form.control}
                                name="personID"
                                render={({ field }) => (
                                    <FormItem className="mt-3">
                                        <FormLabel>Person ID</FormLabel>
                                        <FormControl>
                                            <Label {...field} >{field.value ? field.value : "Not Selected"}</Label>
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                        </div>
                        {/* EXPIRY DATES */}
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <FormField
                                control={form.control}
                                name="expiryStarts"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>Expiry Starts</FormLabel>
                                        <FormControl>
                                            <DateTimePicker {...field} />
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                            <FormField
                                control={form.control}
                                name="expiryEnds"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>Expiry Ends</FormLabel>
                                        <FormControl>
                                            <DateTimePicker {...field} />
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                        </div>
                        <div className="flex justify-end gap-4">
                            <Button variant="outline" type="button" className="text-destructive hover:text-destructive" onClick={deleteAllSelections}>
                                <XCircle className="h-4 w-4 mr-2" />Clear All
                            </Button>
                            <Button type="submit">Submit</Button>
                        </div>
                    </form>
                </Form>
            </CardContent>
        </Card>
    </>
}

export { FormAddNewLivingSpace };