import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Field, Formik } from 'formik';
import { Checkbox } from './CheckBox/CheckBox';
import { DatePicker } from './DatePicker/DatePicker';
import { TextField } from './TextField/TextField';


// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Components/Form',
  component: Checkbox
} as ComponentMeta<typeof Checkbox>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
// const CheckBoxTemplate: ComponentStory<typeof Checkbox> = (args) => <Formik> <Checkbox {...args} /></Formik>;
const FormikTemplate: ComponentStory<typeof Field> = (args) => <><Formik initialValues={{ name: '' }} onSubmit={() => undefined}><Field {...args}/></Formik></>;

export const RegularCheckBox = FormikTemplate.bind({});
RegularCheckBox.args = {
    component: Checkbox,
    name: 'Checkbox',
    label: 'Checkbox',
    value: 'testCheckbox',
    tooltipText: 'This is a tooltip Checkbox hover',
    checked: false
};

export const RegularTextfield = FormikTemplate.bind({});
RegularTextfield.args = {
    component: TextField,
    name: 'Textfield',
    type: 'text',
    label: 'Example',
    placeholder: 'Example placeholder',
    variant: 'outlined'
};

export const RegularDatepicker = FormikTemplate.bind({});
RegularDatepicker.args = {
    component: DatePicker,
    label: 'testDatePicker',
    minDate: new Date('2012-01-01')
};