import React, { useMemo } from 'react';
import dayjs from 'dayjs';

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

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

import Playground from '@/modules/designSystem/modules/Playground/Playground';
import { InlineEditDatePicker, InlineEditDateTimePicker, InlineEditTimePicker } from '@/mui/components';

function InlineDateTimePickerSection() {
  const initialDate = useMemo(() => new Date(), []);

  return (
    <>
      <Playground
        title="InlineDateTimePicker"
        initialState={[
          {
            type: 'select',
            stateId: 'variant',
            options: Object.entries(typography)
              .filter(([, value$]) => typeof value$ === 'object')
              .map(([key]) => key),
            selected: 'body2',
          },
          {
            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',
          },
        ]}
        renderCallback={(state) => {
          const props = {
            ...state,
            format: 'MMM D, YYYY hh:mm A',
            value: dayjs(initialDate),
            editableFromStart: undefined,
            editable: state.editableFromStart,
            onCancel: () => null,
            onApply: () => null,
          };

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

          const propsString = getPropsString({
            ...props,
            value: '!!!dayjs(new Date())',
          });

          return {
            component: <InlineEditDateTimePicker {...props} />,
            code: `${importsList}
<InlineEditDateTimePicker${propsString} />`,
          };
        }}
      />
      <Playground
        title="InlineDatePicker"
        initialState={[
          {
            type: 'select',
            stateId: 'variant',
            options: Object.entries(typography)
              .filter(([, value$]) => typeof value$ === 'object')
              .map(([key]) => key),
            selected: 'body2',
          },
          {
            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',
          },
        ]}
        renderCallback={(state) => {
          const props = {
            ...state,
            format: 'MMM DD, YYYY',
            value: dayjs(initialDate),
            editableFromStart: undefined,
            editable: state.editableFromStart,
            onCancel: () => null,
            onApply: () => null,
          };

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

          const propsString = getPropsString({
            ...props,
            value: '!!!dayjs(new Date())',
          });

          return {
            component: <InlineEditDatePicker {...props} />,
            code: `${importsList}
<InlineEditDatePicker${propsString} />`,
          };
        }}
      />
      <Playground
        title="InlineTimePicker"
        initialState={[
          {
            type: 'select',
            stateId: 'variant',
            options: Object.entries(typography)
              .filter(([, value$]) => typeof value$ === 'object')
              .map(([key]) => key),
            selected: 'body2',
          },
          {
            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',
          },
        ]}
        renderCallback={(state) => {
          const props = {
            ...state,
            format: 'hh:mm A',
            value: dayjs(initialDate),
            editableFromStart: undefined,
            editable: state.editableFromStart,
            onCancel: () => null,
            onApply: () => null,
          };

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

          const propsString = getPropsString({
            ...props,
            value: '!!!dayjs(new Date())',
          });

          return {
            component: <InlineEditTimePicker {...props} />,
            code: `${importsList}
<InlineEditTimePicker${propsString} />`,
          };
        }}
      />
    </>
  );
}

export default InlineDateTimePickerSection;
