import { useState } from 'react';
import { Story, Meta } from '@storybook/react';

import { DatePicker } from './date-picker';
import type { DatePickerProps } from './date-picker';
import noop from 'lodash/noop';
import type { DatesValues } from './date-picker';

export default {
  component: DatePicker,
  title: 'Forms/Calendar'
} as Meta;

const Template: Story<DatePickerProps> = args => {
  const [datePickerValue, setDatePickerValue] = useState(args.input.value);

  const handleDatePickerChange = (value: DatesValues) => setDatePickerValue(value);

  return (
    <DatePicker
      {...args}
      input={{
        value: datePickerValue,
        onChange: handleDatePickerChange
      }}
    />
  );
};

export const DateInterval = Template.bind({});
DateInterval.args = {
  placeholder: 'Pick a date',
  label: 'Date picker',
  input: {
    value: {
      startDate: null,
      endDate: null
    },
    onChange: noop
  }
};