/* 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 { DatePicker, StaticDatePicker } from '@/mui/components';

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

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

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

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

          return {
            component: <DatePicker {...props} />,
            code: `${importsList}\n<DatePicker${getPropsString(propsString)}/>`,
          };
        }}
      />
      <Playground
        title="Static Date Picker"
        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([[['StaticDatePicker']]]);

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

export default DatePickerSection;
