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

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

import Playground from '../Playground/Playground';
import { StaticTimePicker, TimePicker } from '@/mui/components';

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

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

          const propsString = {
            ...props,
            // eslint-disable-next-line react/prop-types
            value: props.value.toDate(),
          };

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

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

          const propsString = {
            ...props,
          };

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

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

export default TimePickerSection;
