/**
 * @format
 */
import React from 'react'
import {ComponentStory, ComponentMeta} from '@storybook/react'
import {Heading} from '@chakra-ui/react'
import '../styles/fonts.css'
import VantageDatePicker from '../components/VantageDatePicker/VantageDatePicker'
import {DateObject} from 'react-multi-date-picker'

const Template: ComponentStory<typeof VantageDatePicker> = args => <VantageDatePicker {...args} />
export default {
  title: 'VantagePlus/DatePicker',
  component: Heading
} as ComponentMeta<typeof Heading>

const endDate: Date = new Date()
const newStartDate: Date = new Date()
newStartDate.setDate(newStartDate.getDate() + 5)
const startDate: Date = new Date(newStartDate)

export const DatePickerWithStartDate = Template.bind({})
// More on args: https://storybook.js.org/docs/react/writing-stories/arg
DatePickerWithStartDate.args = {
  datePickerType: 'startDate',
  onChangeCallBack: (val: Date | DateObject) => {
    console.log(val)
  },
  anotherDate: endDate,
  selected: startDate
}

export const DatePickerWithEndDate = Template.bind({})
// More on args: https://storybook.js.org/docs/react/writing-stories/arg
DatePickerWithEndDate.args = {
  datePickerType: 'endDate',
  anotherDate: endDate,
  selected: startDate,
  onChangeCallBack: (val: Date | DateObject) => {
    console.log(val)
  }
}