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

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

  return (
    <>
      <Playground
        title="DateRangePicker"
        initialState={[
          {
            type: 'checkbox',
            stateId: 'disabled',
            selected: false,
          },
        ]}
        renderCallback={(state) => {
          const props = {
            ...state,
            value: value.map((date) => dayjs(date)),
            calendars: 2,
            onChange: (value$) => setValue(value$),
          };

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

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

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

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

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

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

export default DateRangePickerSection;
