import ImportList, { type ImportItem } from '@/components/ImportList';
import AppLayout from '@/layouts/app-layout';
import { type PaginatedData } from '@/types';
import React, { ReactNode } from 'react';

declare const route: (...args: any[]) => string;

interface FieldConfig {
    key: string;
    label: string;
}

type ImportIndexProps = {
    importData: PaginatedData<ImportItem>;
    importSummary: any[];
    modelType: string | string[];
    fields: FieldConfig[];
    tableRows: string[][];
    sampleCsvFilename: string;
    importModalTitle: string;
    importPostRoute: string;
    postRouteParams?: Record<string, any>;
    backHref?: string;
    backTitle?: string;
    section?: string;
    woocommerceMode?: boolean;
    woocommercePostRoute?: string;
    woocommerceIndexHref?: string;
};

function Index({ importData, importSummary, modelType, fields, tableRows, sampleCsvFilename, importModalTitle, importPostRoute, postRouteParams, backHref, backTitle, section, woocommerceMode, woocommercePostRoute, woocommerceIndexHref }: ImportIndexProps) {
    const tableHeaders = fields.map((f) => f.key);
    const csvModalContent = fields;

    return (
        <ImportList
            importData={importData}
            importSummary={importSummary}
            modelType={modelType}
            tableHeaders={tableHeaders}
            tableRows={tableRows}
            csvModalContent={csvModalContent}
            sampleCsvFilename={sampleCsvFilename}
            importModalTitle={importModalTitle}
            importPostRoute={importPostRoute}
            postRouteParams={postRouteParams}
            pageTitle={backTitle}
            section={section}
            woocommerceMode={woocommerceMode}
            woocommercePostRoute={woocommercePostRoute}
            woocommerceIndexHref={woocommerceIndexHref}
        />
    );
}

Index.layout = (page: ReactNode) => {
    const { backHref = '/', backTitle = 'Imports' } = (page as React.ReactElement<ImportIndexProps>).props;
    return (
        <AppLayout
            breadcrumbs={[
                { title: 'Home', href: '/' },
                { title: backTitle, href: backHref },
            ]}
            title={backTitle}
        >
            {page}
        </AppLayout>
    );
};

export default Index;