import { Box } from "@mui/material"
import { useCities } from "../hooks/swrHooks"
import { useEffect, useState } from "react"
import { DataGrid, GridColDef } from "@mui/x-data-grid"
import axiosInstance from "../http/axiosInstance"
import { BASE_URL } from "../constants"


export default function ApiTest() {
    const limit = 10

    const [paginationModel, setPaginationModel] = useState({
        page: 1,
        pageSize: limit
    })

    const [rowCount, setRowCount] = useState(0)

    const fetchCount = async () => {
        await axiosInstance.get(`/general/cities_count`, {
            baseURL: BASE_URL.fuel
        }).then(response => {
            setRowCount(response.data)
        })
    }

    const { cities, isLoading } = useCities(paginationModel.pageSize, paginationModel.page)

    useEffect(() => {
        fetchCount()
    }, [])

    const citiesColumns: GridColDef[] = [
        { field: 'id' },
        { field: 'name' },
    ]

    return (
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px', height: '100%' }}>
            <DataGrid
                rows={cities || []}
                columns={citiesColumns}
                paginationMode='server'
                rowCount={rowCount}
                loading={isLoading}
                paginationModel={paginationModel}
                onPaginationModelChange={setPaginationModel}
            />
        </Box>
    )
}