import { useForm } from '@inertiajs/react';
import { FormErrors, Panel, controlClass } from '@/components/procurement';
import { Button } from '@/components/ui/button';
import type { WorkContextState } from '@/types/work-context';

export function WorkContextSettings({
    context,
    enabled,
    version,
}: {
    context: WorkContextState;
    enabled: string[];
    version: number;
}) {
    const form = useForm({ version, enabled, reason: '', confirm: false });
    return (
        <Panel title="Áreas e opções do produto">
            <p className="mb-4 text-sm">
                A configuração limita as opções contratadas; não atribui
                permissões. A alteração de acesso é imediata, sem modificar
                processos existentes. Os perfis precisam de associação explícita
                às opções. Percursos ainda pendentes ficam identificados no
                Painel Inicial.
            </p>
            {context.purchased.length === 0 && (
                <p>
                    Não existem opções contratadas registadas para esta empresa
                    na instalação.
                </p>
            )}
            <form
                className="space-y-4"
                onSubmit={(e) => {
                    e.preventDefault();
                    form.post('/administracao/parametrizacao/work_contexts', {
                        preserveState: 'errors',
                    });
                }}
            >
                <FormErrors errors={form.errors} />
                {context.purchased.map((key) => (
                    <label className="flex items-center gap-2" key={key}>
                        <input
                            type="checkbox"
                            checked={form.data.enabled.includes(key)}
                            onChange={(e) =>
                                form.setData(
                                    'enabled',
                                    e.target.checked
                                        ? [...form.data.enabled, key]
                                        : form.data.enabled.filter(
                                              (value) => value !== key,
                                          ),
                                )
                            }
                        />
                        {context.options[key].areaLabel} ·{' '}
                        {context.options[key].label}
                    </label>
                ))}
                <label className="block">
                    Motivo
                    <textarea
                        required
                        minLength={10}
                        className={controlClass}
                        value={form.data.reason}
                        onChange={(e) => form.setData('reason', e.target.value)}
                    />
                </label>
                <label className="flex items-center gap-2">
                    <input
                        required
                        type="checkbox"
                        checked={form.data.confirm}
                        onChange={(e) =>
                            form.setData('confirm', e.target.checked)
                        }
                    />
                    Confirmo o efeito imediato sobre o acesso, preservando os
                    processos.
                </label>
                <Button disabled={form.processing}>Guardar opções</Button>
            </form>
        </Panel>
    );
}