import { Form, Head } from '@inertiajs/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 { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useCan } from '@/hooks/use-can';
import { edit as editContact } from '@/routes/admin/settings/company/contact';

export type CompanySettingData = {
    id: number;
    name: string;
    legal_name: string;
    address: string | null;
    city: string | null;
    country: string;
    phone: string | null;
    email: string | null;
    website: string | null;
    tax_id: string | null;
    registration: string | null;
    password_expiry_days: number;
};

export default function CompanyContactSettings({
    company,
}: {
    company: CompanySettingData;
}) {
    const canUpdate = useCan('settings.update');

    return (
        <>
            <Head title="Contact de l'entreprise" />

            <h1 className="sr-only">Contact de l'entreprise</h1>

            <div className="space-y-6">
                <Heading
                    variant="small"
                    title="Contact"
                    description="Coordonnées affichées dans l'en-tête des documents"
                />

                <Form
                    action={CompanySettingController.updateContact.url()}
                    method="put"
                    options={{
                        preserveScroll: true,
                    }}
                    className="space-y-6"
                >
                    {({ processing, errors }) => (
                        <>
                            <div className="grid gap-2">
                                <Label htmlFor="phone">Téléphone</Label>
                                <Input
                                    id="phone"
                                    name="phone"
                                    className="mt-1 block w-full"
                                    defaultValue={company.phone ?? ''}
                                    disabled={!canUpdate}
                                    placeholder="Téléphone"
                                />
                                <InputError
                                    className="mt-2"
                                    message={errors.phone}
                                />
                            </div>

                            <div className="grid gap-2">
                                <Label htmlFor="email">Adresse e-mail</Label>
                                <Input
                                    id="email"
                                    type="email"
                                    name="email"
                                    className="mt-1 block w-full"
                                    defaultValue={company.email ?? ''}
                                    disabled={!canUpdate}
                                    placeholder="Adresse e-mail"
                                />
                                <InputError
                                    className="mt-2"
                                    message={errors.email}
                                />
                            </div>

                            <div className="grid gap-2">
                                <Label htmlFor="website">Site web</Label>
                                <Input
                                    id="website"
                                    name="website"
                                    className="mt-1 block w-full"
                                    defaultValue={company.website ?? ''}
                                    disabled={!canUpdate}
                                    placeholder="https://"
                                />
                                <InputError
                                    className="mt-2"
                                    message={errors.website}
                                />
                            </div>

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

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