import React, { useState } from 'react';

import { APPEARANCE_MODE_DARK, APPEARANCE_MODE_LIGHT } from '@/mui/constants';

import Playground from '@/modules/designSystem/modules/Playground/Playground';
import { Box, JSONEditor } from '@/mui/components';

type StateProps = {
  theme: typeof APPEARANCE_MODE_DARK | typeof APPEARANCE_MODE_LIGHT | '';
  minRows: number | 'none';
  maxRows: number | 'none';
};

function JSONEditorSection() {
  const [value, setValue] = useState<string>(`{
  "string": "This is a string",
  "number": 42,
  "float": 3.14159,
  "booleanTrue": true,
  "booleanFalse": false,
  "nullValue": null,
  "array": [1, "two", false, null, {"nested": "object"}],
  "object": {
    "nestedString": "Nested",
    "nestedNumber": 100,
    "nestedBoolean": true,
    "nestedArray": [1, 2, 3],
    "nestedObject": {
      "key": "value"
    }
  },
  "emptyArray": [],
  "emptyObject": {}
}`);

  return (
    <Playground
      title="JSON Editor"
      initialState={[
        {
          type: 'select',
          stateId: 'theme',
          options: [
            {
              label: 'Light',
              value: APPEARANCE_MODE_LIGHT,
            },
            {
              label: 'Dark',
              value: APPEARANCE_MODE_DARK,
            },
            {
              label: 'System Depends',
              value: '',
            },
          ],
          selected: '',
        },
        {
          type: 'select',
          stateId: 'minRows',
          options: ['none', 21, 22],
          selected: 'none',
        },
        {
          type: 'select',
          stateId: 'maxRows',
          options: ['none', 21, 23],
          selected: 'none',
        },
      ]}
      renderCallback={(state: StateProps) => ({
        component: (
          <Box sx={{ width: '100%', maxHeight: '600px', overflow: 'auto' }}>
            <JSONEditor
              value={value}
              onChange={(json) => setValue(json)}
              minRows={state.minRows === 'none' ? undefined : state.minRows}
              maxRows={state.maxRows === 'none' ? undefined : state.maxRows}
            />
          </Box>
        ),
        code: `<JSONEditor value={\`${value}\`} onChange={(json) => json} />`,
      })}
    />
  );
}

export default JSONEditorSection;
