import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import AppLayout from '@/layouts/app-layout';
import product from '@/routes/product';
import { BreadcrumbItem } from '@/types';
import { Head, Link, router } from '@inertiajs/react';
import { useState } from 'react';

import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Add Product',
        href: product.add().url,
    },
];

export default function Add() {
    const [values, setValues] = useState({
        name: '',
        url: '',
        display_status: '',
    });
    function handleChange(e: { target: { id: any; value: any } }) {
        const key = e.target.id;
        const value = e.target.value;
        setValues((values) => ({
            ...values,
            [key]: value,
        }));
    }

    function handleSubmit(e: { preventDefault: () => void }) {
        e.preventDefault();
        router.post(product.store().url, values);
    }
    return (
        <>
            <AppLayout breadcrumbs={breadcrumbs}>
                <Head title="Add Product" />
                <div className="flex flex-col gap-4 px-8 py-8">
                    <h1 className="font-bold">Add Products</h1>
                    <form
                        className="flex flex-col gap-2"
                        method="POST"
                        action={product.store().url}
                        onSubmit={handleSubmit}
                    >
                        <div>
                            <Label htmlFor="name">
                                Name <span className="text-red-500">*</span>
                            </Label>
                            <Input
                                className="w-full"
                                name="name"
                                id="name"
                                value={values.name}
                                onChange={handleChange}
                                required
                            />
                        </div>
                        <div>
                            <Label htmlFor="url">
                                URL <span className="text-red-500">*</span>
                            </Label>
                            <Input
                                className="w-full"
                                name="url"
                                id="url"
                                value={values.url}
                                onChange={handleChange}
                                required
                            />
                        </div>
                        <div>
                            <Label>Display State</Label>
                            <Select
                                defaultValue={values.display_status}
                                onValueChange={(val) =>
                                    setValues((v) => ({
                                        ...v,
                                        display_status: val,
                                    }))
                                }
                            >
                                <SelectTrigger className="w-full">
                                    <SelectValue placeholder="Select Display State" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="draft">Draft</SelectItem>
                                    <SelectItem value="active">
                                        Active
                                    </SelectItem>
                                </SelectContent>
                            </Select>
                        </div>
                        <div className="flex items-center gap-2">
                            <Button type="submit" className="cursor-pointer">
                                Submit
                            </Button>
                            <Link href={product.index()}>
                                <Button
                                    type="button"
                                    className="cursor-pointer"
                                    variant={'secondary'}
                                >
                                    Cancel
                                </Button>
                            </Link>
                        </div>
                    </form>
                </div>
            </AppLayout>
        </>
    );
}
