import { useEffect, useState } from 'react'
import { invokeWebApiWrapperAsync } from '../../components/factory'
import LoaderPortal from '../../components/LoaderPortal'
import { EditableTable, makeColumn, makeSelectColumn } from '../../components/Table'
import { AdminClusterService, AdminDepositService } from '../../services/api'

export const ClusterController = () => {
    const [deposits, setDeposits] = useState([])
    const [clusters, setClusters] = useState([])
    const [showLoader, setShowLoader] = useState(false)

    const clusterColumns = [
        makeSelectColumn('Месторождение', 'idDeposit', deposits, '--', { width: 200, editable: true }),
        makeColumn('Название', 'caption', { width: 200, editable: true }),
        makeColumn('Широта', 'latitude', { width: 150, editable: true }),
        makeColumn('Долгота', 'longitude', { width: 150, editable: true })
    ]

    const updateTable = () => invokeWebApiWrapperAsync(
        async () => {
            const clusters = await AdminClusterService.getAll()
            if (!clusters)
                throw Error(`Не удалось загрузить список кустов`)
            setClusters(clusters)
        },
        setShowLoader,
        `Не удалось загрузить список кустов`
    )

    useEffect(() => invokeWebApiWrapperAsync(
        async () => {
            let deposits = await AdminDepositService.getAll()
            deposits = deposits?.map((deposit) => ({ value: deposit.id, label: deposit.caption }))
            setDeposits(deposits ?? [])
        },
        setShowLoader,
        `Не удалось загрузить список месторождений`
    ), [])

    useEffect(updateTable, [])

    const onAdd = async (cluster) => {
        await AdminClusterService.insert(cluster)
        updateTable()
    }

    const onEdit = async (cluster) => {
        if (!cluster.id) return
        await AdminClusterService.put(cluster.id, cluster)
        updateTable()
    }

    const onDelete = async (cluster) => {
        if (!cluster.id) return
        await AdminClusterService.delete(cluster.id)
        updateTable()
    }

    return (
        <LoaderPortal show={showLoader}>
            <EditableTable
                size={'small'}
                bordered
                columns={clusterColumns}
                dataSource={clusters}
                onRowAdd={onAdd}
                onRowEdit={onEdit}
                onRowDelete={onDelete}
            />
        </LoaderPortal>
    )
}