import { Head, useForm } from '@inertiajs/react';
import type { FormEvent } from 'react';
import CompanySettingController from '@/actions/App/Http/Controllers/Admin/CompanySettingController';
import Heading from '@/components/heading';
import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { useCan } from '@/hooks/use-can';
import { edit as editGeneral } from '@/routes/admin/settings/company/general';
import type { CompanySettingData } from '@/types/company-setting';

export default function CompanyGeneralSettings({
    company,
    currencyOptions,
    timezoneOptions,
}: {
    company: CompanySettingData;
    currencyOptions: Record<string, string>;
    timezoneOptions: Record<string, string>;
}) {
    const canUpdate = useCan('settings.update');

    const form = useForm({
        currency: company.currency,
        timezone: company.timezone,
    });

    function submit(event: FormEvent) {
        event.preventDefault();

        form.put(CompanySettingController.updateGeneral.url(), {
            preserveScroll: true,
        });
    }

    return (
        <>
            <Head title="Paramètres généraux" />

            <h1 className="sr-only">Paramètres généraux</h1>

            <div className="space-y-6">
                <Heading
                    variant="small"
                    title="Général"
                    description="Devise et fuseau horaire utilisés dans l'application"
                />

                <form onSubmit={submit} className="space-y-6">
                    <div className="grid gap-2">
                        <Label htmlFor="currency">Devise</Label>
                        <Select
                            value={form.data.currency}
                            onValueChange={(value) =>
                                form.setData('currency', value)
                            }
                            disabled={!canUpdate || form.processing}
                        >
                            <SelectTrigger id="currency" className="w-full">
                                <SelectValue placeholder="Choisir une devise" />
                            </SelectTrigger>
                            <SelectContent>
                                {Object.entries(currencyOptions).map(
                                    ([code, label]) => (
                                        <SelectItem key={code} value={code}>
                                            {label}
                                        </SelectItem>
                                    ),
                                )}
                            </SelectContent>
                        </Select>
                        <InputError message={form.errors.currency} />
                    </div>

                    <div className="grid gap-2">
                        <Label htmlFor="timezone">Fuseau horaire</Label>
                        <Select
                            value={form.data.timezone}
                            onValueChange={(value) =>
                                form.setData('timezone', value)
                            }
                            disabled={!canUpdate || form.processing}
                        >
                            <SelectTrigger id="timezone" className="w-full">
                                <SelectValue placeholder="Choisir un fuseau horaire" />
                            </SelectTrigger>
                            <SelectContent>
                                {Object.entries(timezoneOptions).map(
                                    ([zone, label]) => (
                                        <SelectItem key={zone} value={zone}>
                                            {label}
                                        </SelectItem>
                                    ),
                                )}
                            </SelectContent>
                        </Select>
                        <InputError message={form.errors.timezone} />
                    </div>

                    {canUpdate && (
                        <div className="flex items-center gap-4">
                            <Button disabled={form.processing}>
                                Enregistrer
                            </Button>
                        </div>
                    )}
                </form>
            </div>
        </>
    );
}

CompanyGeneralSettings.layout = {
    breadcrumbs: [
        {
            title: 'Paramètres de l\'entreprise',
            href: editGeneral(),
        },
    ],
};
