import { useState } from 'react'
import useSWR from 'swr'
import { fetcher } from '../../http/axiosInstance'
import { BASE_URL } from '../../constants'
import { NavLink, Stack, Text } from '@mantine/core';
import { IconChevronDown } from '@tabler/icons-react';
import { setSelectedObjectType } from '../../store/map';
import { setCurrentObjectId, useObjectsStore } from '../../store/objects';

const ObjectTree = ({
    map_id
}: {
    map_id: string,
}) => {
    const { selectedYear, selectedDistrict } = useObjectsStore().id[map_id]
    const [existingCount, setExistingCount] = useState(0)
    const [planningCount, setPlanningCount] = useState(0)

    const { data: existingObjectsList } = useSWR(
        selectedYear && selectedDistrict ? `/general/objects/list?year=${selectedYear}&city_id=${selectedDistrict}&planning=0` : null,
        (url) => fetcher(url, BASE_URL.ems).then(res => {
            if (Array.isArray(res)) {
                let count = 0
                res.forEach(el => {
                    count = count + el.count
                })
                setExistingCount(count)
            }
            return res
        }),
        {
            revalidateOnFocus: false
        }
    )

    const { data: planningObjectsList } = useSWR(
        selectedYear && selectedDistrict ? `/general/objects/list?year=${selectedYear}&city_id=${selectedDistrict}&planning=1` : null,
        (url) => fetcher(url, BASE_URL.ems).then(res => {
            if (Array.isArray(res)) {
                let count = 0
                res.forEach(el => {
                    count = count + el.count
                })
                setPlanningCount(count)
            }
            return res
        }),
        {
            revalidateOnFocus: false
        }
    )

    if (selectedDistrict) {
        return (
            <Stack gap={0}>
                <TypeTree map_id={map_id} label='Существующие' value={'existing'} count={existingCount} objectList={existingObjectsList} planning={0} />
                <TypeTree map_id={map_id} label='Планируемые' value={'planning'} count={planningCount} objectList={planningObjectsList} planning={1} />
            </Stack>
        )
    } else {
        return (
            <Text size='xs'>Выберите регион и населённый пункт, чтобы увидеть список объектов.</Text>
        )
    }


}

interface TypeTreeProps {
    label: string;
    value: string;
    count: number;
    objectList: unknown;
    planning: number;
    map_id: string;
}

const TypeTree = ({
    label,
    objectList,
    count,
    planning,
    map_id
}: TypeTreeProps) => {

    return (
        <NavLink p={0} label={`${label} ${count ? `(${count})` : ''}`}>
            {Array.isArray(objectList) && objectList.map(list => (
                <ObjectList map_id={map_id} key={list.id} label={list.name} id={list.id} planning={planning} count={list.count} />
            ))}
        </NavLink>
    )
}

interface IObjectList {
    label: string;
    id: number;
    planning: number;
    count: number;
    map_id: string;
}

const ObjectList = ({
    label,
    id,
    planning,
    count,
    map_id
}: IObjectList) => {
    const { selectedDistrict, selectedYear } = useObjectsStore().id[map_id]

    const { data } = useSWR(
        selectedDistrict && selectedYear ? `/general/objects/list?type=${id}&city_id=${selectedDistrict}&year=${selectedYear}&planning=${planning}` : null,
        (url) => fetcher(url, BASE_URL.ems),
        {
            revalidateOnFocus: false,
            revalidateIfStale: false
        }
    )

    return (
        <NavLink onClick={() => {
            setSelectedObjectType(map_id, id)
        }} rightSection={<IconChevronDown size={14} />} p={0} label={`${label} ${count ? `(${count})` : ''}`}>
            {Array.isArray(data) && data.map((type) => (
                <NavLink key={type.object_id} label={type.caption ? type.caption : 'Без названия'} p={0} onClick={() => setCurrentObjectId(map_id, type.object_id)} />
            ))}
        </NavLink>
    )
}

export default ObjectTree