import { useEffect, useState } from "react"
import { Button, Typography } from "@mui/material"
import axiosInstance from "../http/axiosInstance"
import DataTable from "../components/DataTable"
import { GridColDef } from "@mui/x-data-grid"

export default function ApiTest() {
    const [state, setState] = useState<any>(null)
    const [exportData, setExportData] = useState<any>(null)

    const fetch = async () => {
        await axiosInstance.get(`/info/reports/0?to_export=true`, {
            responseType: 'blob'
        }).then(response => {
            setExportData(response.data)
            console.log(response.data)

            const url = window.URL.createObjectURL(response.data)
            const link = document.createElement('a')
            link.href = url
            link.setAttribute('download', 'report.xlsx')
            document.body.appendChild(link);
            link.click();
            link.remove();
        })
    }

    const fetchBlob = async () => {
        // await axiosInstance.get(`/info/document/1&2`, {
        //     responseType: 'blob'
        // }).then(response => {
        //     setState(response)
        // })

        await axiosInstance.get(`/info/reports/0`).then(response => {
            setState(JSON.parse(response.data))
        })
    }

    const columns: GridColDef[] =
        [
            { field: 'id', headerName: "№", type: "number", width: 90 },
            { field: 'region', headerName: 'Регион', type: "string", width: 90, },
            { field: 'city', headerName: 'Город', type: "string", width: 130 },
            { field: 'name_type', headerName: 'Вид объекта', type: "string", width: 90, },
            { field: 'name', headerName: 'Наименование', type: "string", width: 90, },
            // { field: 'code', headerName: 'Код', type: "string", width: 130 },
            // { field: 'code_city', headerName: '', type: "string", width: 90, },
            // { field: 'code_fuel', headerName: '', type: "string", width: 90, },
            // { field: 'code_master', headerName: '', type: "string", width: 90, },
            // { field: 'code_region', headerName: '', type: "string", width: 90, },
            // { field: 'code_type', headerName: '', type: "string", width: 90, },
            { field: 'num', headerName: 'Инвентарный код', type: "string", width: 90, },
            { field: 'fuel_type', headerName: 'Тип топлива', type: "string", width: 90, },
            { field: 'fuel', headerName: 'Топливо', type: "string", width: 90, },
            { field: 'zone', headerName: 'Мертвая зона', type: "string", width: 90, },
            { field: 'active', headerName: 'Активность', type: "boolean", width: 70 },
            // { field: 'full_name', headerName: 'Полное наименование', type: "string", width: 90, },
        ];

    return (
        <>
            <Typography>
                <Button onClick={() => {
                    fetchBlob()
                }}>
                    Получить таблицу
                </Button>

                <Button onClick={() => {
                    fetch()
                }}>
                    Экспорт
                </Button>

                {state &&
                    <DataTable
                        checkboxSelection={false}
                        columns={
                            [
                                { field: 'id', headerName: '№', width: 70 },
                                ...Object.keys(state).map(key => ({
                                    field: key,
                                    headerName: key.charAt(0).toUpperCase() + key.slice(1),
                                    width: 150
                                }))
                            ]
                        }
                        rows={
                            [...new Set(Object.keys(state).flatMap(key => Object.keys(state[key])))].map(id => {
                                const row: any = { id: Number(id) };
                                Object.keys(state).forEach(key => {
                                    row[key] = state[key][id];
                                });
                                return row;
                            })
                        } />
                }
            </Typography>
        </>
    )
}