import { Head, Link } from '@inertiajs/react';
import { ArrowLeft } from 'lucide-react';
import { useMemo } from 'react';
import {
    edit as extraWorkEdit,
    index as extraWorkIndex,
    staff as extraWorkStaff,
    update as extraWorkUpdate,
} from '@/actions/App/Http/Controllers/PermanentEmployeeExtraWorkController';
import { PermanentEmployeeExtraWorkForm } from '@/components/employees/permanent-employee-extra-work-form';
import { Button } from '@/components/ui/button';
import { useLanguage } from '@/contexts/language-context';
import AppLayout from '@/layouts/app-layout';
import { dashboard } from '@/routes';

export default function PermanentEmployeeExtraWorkEdit({ record, employees }) {
    const { t } = useLanguage();
    const p = t.permanentEmployeeExtraWorkPage;

    const breadcrumbs = useMemo(
        () => [
            { title: t.dashboard.breadcrumb, href: dashboard() },
            { title: t.nav.employeeManagement, href: '#' },
            { title: p.breadcrumb, href: extraWorkIndex.url() },
            {
                title: record?.permanent_employee_id
                    ? p.editBreadcrumb
                    : p.editBreadcrumb,
                href: record?.id ? extraWorkEdit.url(record.id) : extraWorkIndex.url(),
            },
        ],
        [t.dashboard.breadcrumb, t.nav.employeeManagement, p.breadcrumb, p.editBreadcrumb, record],
    );

    const formLabels = useMemo(() => ({ ...p }), [p]);

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title={p.editHeadTitle} />
            <div className="flex flex-col gap-6 p-4">
                <Button variant="outline" size="sm" asChild className="w-fit">
                    <Link
                        href={
                            record?.permanent_employee_id
                                ? extraWorkStaff.url(record.permanent_employee_id)
                                : extraWorkIndex.url()
                        }
                        prefetch
                    >
                        <ArrowLeft className="size-4" />
                        {p.backToStaffHistory}
                    </Link>
                </Button>
                <PermanentEmployeeExtraWorkForm
                    mode="edit"
                    initial={record}
                    employees={employees}
                    labels={formLabels}
                    submitUrl={extraWorkUpdate.url(record.id)}
                    submitMethod="put"
                    submitLabel={p.editSubmit}
                    submittingLabel={p.editSubmitting}
                    confirmTitle={p.confirmUpdateTitle}
                    confirmBody={p.confirmUpdateBody}
                    cancelLabel={t.appActions.cancel}
                />
            </div>
        </AppLayout>
    );
}
