import useSWR from 'swr'
import { fetcher } from '../../../http/axiosInstance'
import { BASE_URL } from '../../../constants'
import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, ColorSwatch, Text } from '@fluentui/react-components'
import { useAppStore } from '../../../store/app'

const MapLegend = ({
    selectedDistrict,
    selectedYear,
}: {
    selectedDistrict: number | null,
    selectedYear: number | null,
}) => {
    const { colorScheme } = useAppStore()

    const { data: existingObjectsList } = useSWR(
        selectedYear && selectedDistrict ? `/general/objects/list?year=${selectedYear}&city_id=${selectedDistrict}&planning=0` : null,
        (url) => fetcher(url, BASE_URL.ems),
        {
            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),
        {
            revalidateOnFocus: false
        }
    )

    return (
        <div
            style={{ overflow: 'auto', maxWidth: '300px', width: '100%', marginTop: 'auto', zIndex: 1, backdropFilter: 'blur(8px)', backgroundColor: colorScheme === 'light' ? '#FFFFFFAA' : '#000000AA', borderRadius: '4px' }}
        >
            <Accordion collapsible>
                <AccordionItem value='existing'>
                    <AccordionHeader>
                        Легенда
                    </AccordionHeader>

                    <AccordionPanel>
                        <Accordion multiple collapsible>
                            <AccordionItem value='existing'>
                                <AccordionHeader>
                                    Существующие
                                </AccordionHeader>

                                <AccordionPanel>
                                    {existingObjectsList && <LegendGroup objectsList={existingObjectsList} border='solid' />}
                                </AccordionPanel>
                            </AccordionItem>

                            <AccordionItem value='planning'>
                                <AccordionHeader>
                                    Планируемые
                                </AccordionHeader>

                                <AccordionPanel>
                                    {planningObjectsList && <LegendGroup objectsList={planningObjectsList} border='dotted' />}
                                </AccordionPanel>
                            </AccordionItem>
                        </Accordion>
                    </AccordionPanel>
                </AccordionItem>
            </Accordion>
        </div>
    )
}

const LegendGroup = ({
    objectsList,
    border
}: {
    objectsList: { id: number, name: string, count: number, r: number | null, g: number | null, b: number | null }[],
    border: 'solid' | 'dotted'
}) => {

    const borderStyle = () => {
        switch (border) {
            case 'solid':
                return '2px solid black'
            case 'dotted':
                return '2px dotted black'
            default:
                return 'none'
        }
    }

    return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
            {objectsList.map(object => (
                <div style={{ display: 'flex', gap: '0.25rem', alignItems: 'center' }} key={object.id}>
                    <ColorSwatch size='extra-small' style={{ border: borderStyle() }} color={`rgb(${object.r},${object.g},${object.b})`} value={`rgb(${object.r},${object.g},${object.b})`} />
                    -
                    <Text size={200}>{object.name}</Text>
                </div>
            ))}
        </div>
    )
}

export default MapLegend