import { IObjectParam } from '../../../interfaces/objects';
import ObjectParameter from '../ObjectParameter';
import useSWR from 'swr';
import { BASE_URL } from '../../../constants';
import { fetcher } from '../../../http/axiosInstance';
import { useObjectsStore } from '../../../store/objects';
import { Spinner, Tab, Table, TableBody, TableHeader, TableHeaderCell, TableRow, TabList, Text } from '@fluentui/react-components';
import { useState } from 'react';

const ObjectParameters = ({
    map_id
}: {
    map_id: string
}) => {

    const { currentObjectId } = useObjectsStore().id[map_id]

    const { data: valuesData, isValidating: valuesValidating } = useSWR(
        currentObjectId ? `/general/values/?object_id=${currentObjectId}` : null,
        (url) => fetcher(url, BASE_URL.nest),
        {
            revalidateOnFocus: false,
            revalidateIfStale: false
        }
    )

    const [selectedTab, setSelectedTab] = useState<string | unknown>('parameters')

    return (
        <div style={{
            display: 'flex',
            flexDirection: 'column',
            width: '100%',
            height: '100%',
            maxHeight: '50%',
        }}>
            <div style={{
                display: 'flex',
                flexWrap: 'wrap',
                maxWidth: '100%',
                overflowX: 'auto',
                minHeight: 'min-content',
                borderBottom: '1px solid var(--colorNeutralShadowKey)'
            }}>
                <TabList size='small' selectedValue={selectedTab} onTabSelect={(_, data) => setSelectedTab(data.value)}>
                    <Tab key={'history'} value={'history'}>
                        <Text size={200}>{'История изменений'}</Text>
                    </Tab>

                    <Tab key={'parameters'} value={'parameters'}>
                        <Text size={200}>{'Параметры'}</Text>
                    </Tab>

                    <Tab key={'calculated'} value={'calculated'}>
                        <Text size={200}>{'Вычисляемые'}</Text>
                    </Tab>
                </TabList>
            </div>


            <div style={{
                display: 'flex',
                overflow: 'auto',
                position: 'relative'
            }}>
                {(valuesValidating) && (
                    <div
                        style={{
                            position: "absolute",
                            inset: 0,
                            backgroundColor: "rgba(255, 255, 255, 0.6)",
                            display: "flex",
                            justifyContent: "center",
                            alignItems: "center",
                            zIndex: 9999,
                        }}
                    >
                        <Spinner size="large" label="Загрузка..." />
                    </div>
                )}

                <div style={{ display: selectedTab !== 'history' ? 'none' : 'initial' }}>

                </div>

                <div style={{ display: selectedTab !== 'parameters' ? 'none' : 'initial' }}>
                    <Table size='extra-small'>
                        <TableHeader>
                            <TableRow appearance='neutral'>
                                <TableHeaderCell>Параметр</TableHeaderCell>

                                <TableHeaderCell>Значение</TableHeaderCell>
                            </TableRow>
                        </TableHeader>

                        <TableBody>
                            {Array.isArray(valuesData) &&
                                valuesData.filter((param: IObjectParam) => param.format !== 'calculate').map((param: IObjectParam) => (
                                    <ObjectParameter map_id={map_id} key={param.id_param} param={param} />
                                ))
                            }
                        </TableBody>
                    </Table>
                </div>

                <div style={{ display: selectedTab !== 'calculated' ? 'none' : 'initial' }}>
                    <Table size='extra-small'>
                        <TableHeader>
                            <TableRow appearance='neutral'>
                                <TableHeaderCell>Параметр</TableHeaderCell>

                                <TableHeaderCell>Значение</TableHeaderCell>
                            </TableRow>
                        </TableHeader>

                        <TableBody>
                            {Array.isArray(valuesData) &&
                                valuesData.filter((param: IObjectParam) => param.format === 'calculate').map((param: IObjectParam) => (
                                    <ObjectParameter map_id={map_id} key={param.id_param} param={param} />
                                ))
                            }
                        </TableBody>
                    </Table>
                </div>
            </div>
        </div>
    )

    return (
        <div style={{ display: 'flex', gap: '1rem', flexDirection: 'column', position: 'relative' }}>
            {(valuesValidating) && (
                <div
                    style={{
                        position: "absolute",
                        inset: 0,
                        backgroundColor: "rgba(255, 255, 255, 0.6)",
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center",
                        zIndex: 9999,
                    }}
                >
                    <Spinner size="large" label="Загрузка..." />
                </div>
            )}

            <Table size='extra-small'>
                <TableHeader>
                    <TableRow appearance='neutral'>
                        <TableHeaderCell>Параметр</TableHeaderCell>

                        <TableHeaderCell>Значение</TableHeaderCell>
                    </TableRow>
                </TableHeader>

                <TableBody>
                    {Array.isArray(valuesData) &&
                        valuesData.map((param: IObjectParam) => (
                            <ObjectParameter map_id={map_id} key={param.id_param} param={param} />
                        ))
                    }
                </TableBody>
            </Table>
        </div>
    )
}

export default ObjectParameters