import React from 'react';
import { BulkSchema } from 'src/components/contract-bulk-edit/common/edit-schema/common-bulk-edit-schema';
import { GridTable, Section } from '@theorchard/suite-components';
import { ALL_SCHEMAS } from 'src/components/contract-bulk-edit/common/edit-schema/bulk-edit-schema-registry';
import EntityBulkEditTemplateDownload from 'src/components/contract-bulk-edit/common/entity-bulk-edit-template-download';

const EntityBulkEditSupportedUpdateSchemas: React.FC<object> = () => {
    const allSchemas = ALL_SCHEMAS;

    const renderSchemaExpectedFileColumns = (schema: BulkSchema) => {
        const data = schema.expectedFileColumns;
        return (
            <Section key={schema.displayName}>
                <Section.Header title={schema.displayName}></Section.Header>
                <Section.Body>
                    <EntityBulkEditTemplateDownload schema={schema} />
                    <GridTable
                        data={data}
                        rowKey={'name'}
                        columnDefs={[
                            {
                                name: 'name',
                                title: 'Column Name',
                            },
                            {
                                name: 'description',
                                title: 'Description',
                            },
                        ]}
                        hideColumnSeparators
                    />
                </Section.Body>
            </Section>
        );
    };

    return (
        <>
            <Section>
                <Section.Header title="Supported Upload Files" />
                <Section.Body>
                    {allSchemas.map(schema =>
                        renderSchemaExpectedFileColumns(schema)
                    )}
                </Section.Body>
            </Section>
        </>
    );
};

export default EntityBulkEditSupportedUpdateSchemas;