import React from 'react';

import typography from '@/mui/constants/typography';

import { getImportsString, getPropsString } from '@/modules/designSystem/modules/helpers';

import Playground from '@/modules/designSystem/modules/Playground/Playground';
import { InlineEditTextField, Stack } from '@/mui/components';

function InlineTextFieldSection() {
  const text =
    'By instantly activating the innate data in video with AI, ' +
    'the power once reserved for text—transparency, interactivity and collaboration—is now available for' +
    ' the most desired and prevalent form of communication: video. ' +
    'Instantly and automatically analyze every video frame-by-frame by brand, object, people, ' +
    'spoken word, text, content category and brand safety. Centralize all your video content in one ' +
    'place so you can automatically manage, organize, host, and distribute.';

  return (
    <Stack spacing={3}>
      <Playground
        alignItems="flex-start"
        minHeight="none"
        title="Inline Edit TextField"
        initialState={[
          {
            type: 'select',
            stateId: 'variant',
            options: Object.entries(typography)
              .filter(([key, value$]) => typeof value$ === 'object' && key !== 'overline')
              .map(([key]) => key),
            selected: 'body2',
          },
          {
            type: 'input-number',
            stateId: 'maxLength',
            selected: '1000',
          },
          {
            type: 'select',
            stateId: 'minRows',
            options: ['none', ...new Array(5).fill(0).map((_, i) => i + 1)],
            selected: 'none',
          },
          {
            type: 'select',
            stateId: 'rows',
            options: ['none', ...new Array(5).fill(0).map((_, i) => i + 1)],
            selected: 'none',
          },
          {
            type: 'checkbox',
            stateId: 'disabled',
            selected: false,
          },
          {
            type: 'checkbox',
            stateId: 'readOnly',
            selected: false,
          },
          {
            type: 'checkbox',
            stateId: 'editableFromStart',
            selected: false,
          },
          {
            type: 'input-text',
            stateId: 'placeholder',
            selected: 'Enter description here',
          },
          {
            type: 'input-text',
            stateId: 'textPlaceholder',
            selected: 'No description yet...',
          },
        ]}
        renderCallback={(state) => {
          const props = {
            ...state,
            value: text,
            maxLength: parseInt(state.maxLength, 10) || 0,
            minRows: state.minRows === 'none' ? undefined : state.minRows,
            rows: state.rows === 'none' ? undefined : state.rows,
            editableFromStart: undefined,
            editable: state.editableFromStart,
            onCancel: () => null,
            onApply: () => null,
          };

          const importsList = getImportsString([[['InlineEditTextField']]]);

          return {
            component: <InlineEditTextField {...props} />,
            code: `${importsList}
<InlineEditTextField${getPropsString(props)} />`,
          };
        }}
      />
    </Stack>
  );
}

export default InlineTextFieldSection;
