import { useForm } from '@inertiajs/react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { LoadingButton } from '@/components/ui/loading-button';
import { Textarea } from '@/components/ui/textarea';
import { useI18n } from '@/hooks/use-i18n';

type MailboxIgnoredFilenamesCardProps = {
    initialPatternsText: string;
};

export function MailboxIgnoredFilenamesCard({ initialPatternsText }: MailboxIgnoredFilenamesCardProps) {
    const { t } = useI18n();
    const form = useForm({
        patterns_text: initialPatternsText,
    });

    const submit = () => {
        form.put('/settings/mailbox-import', {
            preserveScroll: true,
        });
    };

    return (
        <Card>
            <CardHeader>
                <CardTitle>{t('settings.mailbox_import.form.card_title')}</CardTitle>
                <CardDescription>{t('settings.mailbox_import.form.card_description')}</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
                <div className="space-y-2">
                    <Label htmlFor="ignored-filename-patterns">
                        {t('settings.mailbox_import.form.label')}
                    </Label>
                    <Textarea
                        id="ignored-filename-patterns"
                        value={form.data.patterns_text}
                        onChange={(event) => form.setData('patterns_text', event.target.value)}
                        placeholder={t('settings.mailbox_import.form.placeholder')}
                        rows={8}
                        className="font-mono text-sm"
                        disabled={form.processing}
                    />
                    <p className="text-xs text-muted-foreground">{t('settings.mailbox_import.form.hint')}</p>
                    {form.errors.patterns_text ? (
                        <p className="text-xs text-destructive">{form.errors.patterns_text}</p>
                    ) : null}
                </div>
                <div className="flex justify-end">
                    <LoadingButton type="button" loading={form.processing} onClick={submit}>
                        {t('settings.mailbox_import.form.save')}
                    </LoadingButton>
                </div>
            </CardContent>
        </Card>
    );
}