/* sheetjs (C) SheetJS -- https://sheetjs.com */

import './App.css'
import { useCallback, useState } from '@lynx-js/react'
import SheetJSLogo from './assets/SheetJS-logo.png';
import { read, utils, WorkSheet } from 'xlsx';

const make_width = (ws: WorkSheet): number[] => {
    const aoa = utils.sheet_to_json(ws, { header: 1 }), res: number[] = [];
    aoa.forEach((r: any) => { r.forEach((c: any, C: any) => { res[C] = Math.max(res[C] || 60, String(c).length * 10); }); });
    for (let C = 0; C < res.length; ++C) if (!res[C]) res[C] = 60;
    return res;
};

export function App() {
    const [data, setData] = useState<any[]>([
        "SheetJS".split(""),
        [5, 4, 3, 3, 7, 9, 5],
        [8, 6, 7, 5, 3, 0, 9]
    ]);
    const [widths, setWidths] = useState<number[]>(Array.from({ length: 7 }, () => 20));

    const importFile = useCallback(async () => {
        try {
            const ab = await (await fetch("https://docs.sheetjs.com/pres.numbers")).arrayBuffer();
            const wb = read(ab);

            /* convert first worksheet to AOA */
            const wsname = wb.SheetNames[0];
            const ws = wb.Sheets[wsname];
            const data = utils.sheet_to_json(ws, { header: 1 });
            /* update state */
            setData(data);
            console.log(data);

            setWidths(make_width(ws));
        } catch (err) {
            console.log("importFile Error", "Error " + ((err as any).message || err));
        }
    }, []);

    return (
        <view className='App'>
            <text className="Title">
                <image className="Logo" src={SheetJSLogo} /> &nbsp; SheetJS × React Lynx
            </text>
            <view className="Button" bindtap={importFile}>
                <text>IMPORT DATA FROM A SPREADSHEET</text>
            </view>
            <text style={{ margin: '8px', fontWeight: '600'}}>Current Data</text>
            <view className='Table'>
                {data.map((row, rowIndex) => (
                    <view key={`row-${rowIndex}`} className="Row">
                        {Array.isArray(row) && row.map((cell, cellIndex) => (
                            <view
                                key={`cell-${rowIndex}-${cellIndex}`}
                                className="Cell"
                                style={{ width: `${widths[cellIndex]}px` }}
                            >
                                <text>{cell}</text>
                            </view>
                        ))}
                    </view>
                ))}
            </view>
            <view style={{ flex: 1 }}></view>
        </view>
    )
}