import useSWR from 'swr';
import { fetcher } from '../../http/axiosInstance';
import { BASE_URL } from '../../constants';
import { useObjectsStore } from '../../store/objects';
import { Input, Select, TableCell, TableCellLayout, TableRow, Text } from '@fluentui/react-components';
import { useState } from 'react';
import { IObjectValue } from '../../interfaces/objects';

interface TableValueProps {
    name: string;
    values: IObjectValue[];
    type: 'value' | 'boolean' | 'number' | 'select' | 'string';
    unit?: string | null | undefined;
    vtable?: string;
    map_id: string;
}

const TableValue = ({
    name,
    values,
    type,
    unit,
    vtable,
    map_id
}: TableValueProps) => {
    const { selectedDistrict } = useObjectsStore().id[map_id]

    //Get available values
    const [value] = useState(Array.isArray(values) && values.length > 0 ? values[0].value : '')

    const { data: tcbAll, isValidating } = useSWR(
        type === 'select' && selectedDistrict ? `/general/params/tcb?vtable=${vtable}&id_city=${selectedDistrict}` : null,
        (url) => fetcher(url, BASE_URL.nest).then(res => {
            if (Array.isArray(res)) {
                return res.map((el) => ({
                    label: el.name || "",
                    value: JSON.stringify(el.id)
                }))
            }
        }),
        {
            revalidateOnFocus: false,
            revalidateIfStale: false
        }
    )

    return (
        <TableRow>
            <TableCell>
                <TableCellLayout truncate title={name as string}>
                    {name as string}
                </TableCellLayout>
            </TableCell>

            <TableCell style={{ padding: '0.25rem' }}>
                <div style={{ display: 'flex' }}>
                    {type === 'boolean' ?
                        <Select style={{ display: 'flex', width: '100%' }} size='small' defaultChecked={value as boolean}>
                            {[true, false].map(tcb => (
                                <option key={JSON.stringify(tcb)} value={JSON.stringify(tcb)}>
                                    {tcb === true ? 'Да' : 'Нет'}
                                </option>
                            ))}
                        </Select>
                        // <Checkbox defaultChecked={value as boolean} />
                        :
                        type === 'number' ?
                            <Input
                                size='small'
                                style={{ display: 'flex', width: '100%' }}
                                defaultValue={value as string}
                                onChange={() => { }}
                                contentAfter={unit ? <Text size={200} wrap={false}>{unit}</Text> : undefined}
                            //displayValue={unit ? ` ${unit}` : ''}
                            />
                            :
                            type === 'select' && !isValidating && tcbAll ?
                                <Select style={{ display: 'flex', width: '100%' }} size='small' defaultValue={JSON.stringify(value)}>
                                    {tcbAll.map(tcb => (
                                        <option key={tcb.value} value={tcb.value}>
                                            {tcb.label}
                                        </option>
                                    ))}
                                </Select>
                                :
                                type === 'string' ?
                                    <Input style={{ display: 'flex', width: '100%' }} size='small' value={value as string} />
                                    :
                                    type === 'value' ?
                                        <Input style={{ display: 'flex', width: '100%' }} size='small' value={value as string} />
                                        :
                                        <Text size={200}>{value as string}</Text>
                    }
                </div>
            </TableCell>
        </TableRow>
    )
}

export default TableValue