/* eslint-disable react/prop-types */
import React, { useState } from 'react';
import dayjs from 'dayjs';

import { getImportsString, getPropsString } from '../helpers';

import Playground from '../Playground/Playground';
import { DateTimePicker, StaticDateTimePicker } from '@/mui/components';

function DateTimePickerSection() {
  const [value, setValue] = useState(new Date('2014-08-18T21:11:54'));

  return (
    <>
      <Playground
        title="DateTimePicker"
        maxWidth={220}
        initialState={[
          {
            type: 'checkbox',
            stateId: 'disabled',
            selected: false,
          },
        ]}
        renderCallback={(state) => {
          const props = {
            ...state,
            value: dayjs(value),
            label: 'Date time',
            onChange: (newValue) => setValue(newValue),
          };

          const propsString = {
            ...props,
            value: props.value.toDate(),
          };

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

          return {
            component: <DateTimePicker {...props} />,
            code: `${importsList}\n<DateTimePicker${getPropsString(propsString)}/>`,
          };
        }}
      />
      <Playground
        title="StaticDateTimePicker"
        initialState={[
          {
            type: 'checkbox',
            stateId: 'disabled',
            selected: false,
          },
        ]}
        renderCallback={(state) => {
          const props = {
            ...state,
            value: dayjs(value),
            onChange: (newValue) => setValue(newValue),
          };

          const propsString = {
            ...props,
            value: props.value.toDate(),
          };

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

          return {
            component: <StaticDateTimePicker {...props} />,
            code: `${importsList}\n<StaticDateTimePicker${getPropsString(propsString)}/>`,
          };
        }}
      />
    </>
  );
}

export default DateTimePickerSection;
