import 'react-json-view-lite/dist/index.css';

import { useState } from 'react';

import {
    allExpanded,
    darkStyles,
    defaultStyles,
    JsonView,
} from 'react-json-view-lite';

import { useAppConfig } from '@/stores/appConfig';

import DataDescription from './components/DataDescription';
import DataLabel from './components/DataLabel';
import { ItemDataProps } from './types';

export const JSONData = (props: ItemDataProps) => {
    const { isDarkTheme } = useAppConfig();

    const [localValue, setLocalValue] = useState(props.getValue());


    return (
        <>
            <DataLabel {...props} />
            <JsonView data={localValue} shouldExpandNode={allExpanded} style={isDarkTheme ? darkStyles : defaultStyles} />

            <DataDescription {...props} />
        </>
    );
};


