import { Link, useForm } from '@inertiajs/react';
import {
    Management,
    Field,
    Pagination,
    button,
    control,
} from '../management/shared';
import type { Paginated } from '../management/shared';
import { titles, statuses } from './types';
import type { Structure, StructureRecord } from './types';

export default function Index({
    structure,
    records,
    filters,
}: {
    structure: Structure;
    records: Paginated<StructureRecord>;
    filters: { q?: string };
}) {
    const form = useForm({ q: filters.q ?? '' });
    return (
        <Management title={titles[structure]}>
            <Link className={button} href={`/management/${structure}/create`}>
                {structure === 'projects'
                    ? 'Criar projecto'
                    : structure === 'clusters'
                      ? 'Criar cluster'
                      : 'Criar corredor'}
            </Link>
            <form
                className="flex flex-wrap items-end gap-3"
                onSubmit={(e) => {
                    e.preventDefault();
                    form.get(`/management/${structure}`);
                }}
            >
                <Field label="Pesquisar por nome ou código">
                    <input
                        className={control}
                        value={form.data.q}
                        onChange={(e) => form.setData('q', e.target.value)}
                    />
                </Field>
                <button className={button}>Pesquisar</button>
            </form>
            <div className="space-y-3">
                {records.data.map((record) => (
                    <article
                        key={record.id}
                        className="rounded border p-4 break-words"
                    >
                        <Link
                            className="font-semibold underline"
                            href={`/management/${structure}/${record.id}/edit`}
                        >
                            {record.name}
                        </Link>
                        <p>
                            {record.code} · {statuses[structure][record.status]}
                        </p>
                        {record.sector && <p>{record.sector}</p>}
                    </article>
                ))}
            </div>
            {!records.data.length && <p>Nenhum registo encontrado.</p>}
            <Pagination page={records} />
        </Management>
    );
}