import React, { MouseEvent, useMemo } from 'react';
import { BulkSchema } from 'src/components/contract-bulk-edit/common/edit-schema/common-bulk-edit-schema';

interface EntityBulkEditTemplateDownloadPropTypes {
    schema: BulkSchema;
}

const EntityBulkEditTemplateDownload: React.FC<
    EntityBulkEditTemplateDownloadPropTypes
> = ({ schema }) => {
    const columnNames = useMemo(
        () => schema.expectedFileColumns.map(column => column.name),
        [schema]
    );

    const baseFileName = useMemo(() => {
        const name = schema.displayName || 'template';
        return `${name}`.trim().replace(/\s+/g, '_').toLowerCase();
    }, [schema]);

    const triggerDownload = (blob: Blob, filename: string) => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    };

    const onDownloadCSV = (e: MouseEvent<HTMLAnchorElement>) => {
        e.preventDefault();
        const header = columnNames.join(',');
        const csvContent = `${header}\n`;
        const blob = new Blob([csvContent], {
            type: 'text/csv;charset=utf-8;',
        });
        triggerDownload(blob, `${baseFileName}_template.csv`);
    };

    const onDownloadXLSX = async (e: MouseEvent<HTMLAnchorElement>) => {
        e.preventDefault();
        const XLSX = await import(/* webpackChunkName: "xlsx" */ 'xlsx');
        const ws = XLSX.utils.aoa_to_sheet([columnNames]);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, 'Template');
        const xlsxArray = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
        const blob = new Blob([xlsxArray], {
            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        });
        triggerDownload(blob, `${baseFileName}_template.xlsx`);
    };

    return (
        <>
            <div
                style={{
                    display: 'flex',
                    gap: '10px',
                    marginLeft: '10px',
                }}
            >
                <a href="#" onClick={onDownloadCSV}>
                    Download CSV Template
                </a>
                <a href="#" onClick={onDownloadXLSX}>
                    Download XLSX Template
                </a>
            </div>
        </>
    );
};

export default EntityBulkEditTemplateDownload;