import { isBefore, isValid, parseISO } from 'date-fns';
import React from 'react';
import { TextInput } from '../../components/TextInput';
import { TextArea } from '../../components/TextArea';
import { Radio } from '../../components/Radio';
import { Autocomplete, AutocompleteOption } from '../../components/Autocomplete';
import { Checkbox } from '../../components/Checkbox';
import { DatePicker } from '../../components/DatePicker';
import { NumberInput } from '../../components/NumberInput';
import { Select, SelectOption } from '../../components/Select';
import { Switch, SwitchOption } from '../../components/Switch';
import { RangeSlider } from '../../components/RangeSlider';
import { Button } from '../../components/Button';
import { Fieldset } from '../../components/Fieldset';
import { useNativeForm } from './useNativeForm';
import { Field } from '../../components/Field';
import { SectionDivider } from '../../components/SectionDivider';
import { EMPTY_FORM_VALUES, PREPOPULATED_FORM_VALUES } from '../constants';
var MINIMUM_DATE = parseISO('2022-01-01');
var Example = function Example(_ref) {
  var initialValues = _ref.initialValues,
    _ref$initialErrors = _ref.initialErrors,
    initialErrors = _ref$initialErrors === void 0 ? {} : _ref$initialErrors;
  var _useNativeForm = useNativeForm(initialValues, initialErrors, {
      email: function email(value) {
        return !value;
      },
      exampleDatePicker: function exampleDatePicker(value) {
        if (value && !isValid(value)) {
          return 'Enter a valid date';
        }
        if (value && isBefore(value, MINIMUM_DATE)) {
          return 'Enter a date on or after 1 January 2022';
        }
        return false;
      }
      // ...
    }),
    formErrors = _useNativeForm.formErrors,
    formPayload = _useNativeForm.formPayload,
    formState = _useNativeForm.formState,
    handleChange = _useNativeForm.handleChange,
    handleCheckboxGroup = _useNativeForm.handleCheckboxGroup,
    handleRadioGroup = _useNativeForm.handleRadioGroup,
    isSubmitting = _useNativeForm.isSubmitting,
    onSubmit = _useNativeForm.onSubmit;
  return /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement("form", {
    onSubmit: onSubmit
  }, /*#__PURE__*/React.createElement(SectionDivider, {
    title: "Example Form"
  }), /*#__PURE__*/React.createElement(Field, {
    hintText: "Example hint text.",
    errors: [{
      error: formErrors.email && 'Required'
    }]
  }, /*#__PURE__*/React.createElement(TextInput, {
    type: "email",
    name: "email",
    label: "Email",
    value: formState.email,
    onChange: handleChange
  })), /*#__PURE__*/React.createElement(Field, {
    hintText: "Example hint text."
  }, /*#__PURE__*/React.createElement(TextInput, {
    type: "password",
    name: "password",
    label: "Password",
    value: formState.password,
    onChange: handleChange
  })), /*#__PURE__*/React.createElement(Field, {
    hintText: "Example hint text."
  }, /*#__PURE__*/React.createElement(TextArea, {
    name: "description",
    label: "Description",
    value: formState.description,
    onChange: handleChange
  })), /*#__PURE__*/React.createElement(Fieldset, {
    legend: "Example checkbox selection"
  }, /*#__PURE__*/React.createElement(Checkbox, {
    onChange: handleCheckboxGroup,
    name: "exampleCheckbox",
    label: "Option 1",
    value: "Option 1",
    checked: Array.isArray(initialValues.exampleCheckbox) && initialValues.exampleCheckbox.includes('Option 1')
  }), /*#__PURE__*/React.createElement(Checkbox, {
    onChange: handleCheckboxGroup,
    name: "exampleCheckbox",
    label: "Option 2",
    value: "Option 2",
    checked: Array.isArray(initialValues.exampleCheckbox) && initialValues.exampleCheckbox.includes('Option 2')
  }), /*#__PURE__*/React.createElement(Checkbox, {
    onChange: handleCheckboxGroup,
    name: "exampleCheckbox",
    label: "Option 3",
    value: "Option 3",
    checked: Array.isArray(initialValues.exampleCheckbox) && initialValues.exampleCheckbox.includes('Option 3')
  })), /*#__PURE__*/React.createElement(Fieldset, {
    legend: "Example radio selection"
  }, /*#__PURE__*/React.createElement(Radio, {
    onChange: handleRadioGroup,
    name: "exampleRadio",
    label: "Option 1",
    value: "Option 1",
    checked: initialValues.exampleRadio === 'Option 1'
  }), /*#__PURE__*/React.createElement(Radio, {
    onChange: handleRadioGroup,
    name: "exampleRadio",
    label: "Option 2",
    value: "Option 2",
    checked: initialValues.exampleRadio === 'Option 2'
  })), /*#__PURE__*/React.createElement(Field, {
    hintText: "Example hint text."
  }, /*#__PURE__*/React.createElement(Switch, {
    name: "exampleSwitch",
    label: "Example switch selection",
    onChange: function onChange(e) {
      return handleChange({
        currentTarget: {
          name: 'exampleSwitch',
          value: e.currentTarget.value
        }
      });
    },
    value: formState.exampleSwitch
  }, /*#__PURE__*/React.createElement(SwitchOption, {
    label: "One",
    value: "1"
  }), /*#__PURE__*/React.createElement(SwitchOption, {
    label: "Two",
    value: "2"
  }), /*#__PURE__*/React.createElement(SwitchOption, {
    label: "Three",
    value: "3"
  }))), /*#__PURE__*/React.createElement(Field, {
    hintText: "Example hint text."
  }, /*#__PURE__*/React.createElement(NumberInput, {
    name: "exampleNumberInput",
    label: "Example number input",
    onChange: function onChange(_, newValue) {
      handleChange({
        currentTarget: {
          name: 'exampleNumberInput',
          value: newValue
        }
      });
    },
    value: formState.exampleNumberInput
  })), /*#__PURE__*/React.createElement(Field, {
    hintText: "Example hint text.",
    errors: [{
      error: formErrors.exampleDatePicker
    }]
  }, /*#__PURE__*/React.createElement(DatePicker, {
    disabledDays: {
      before: MINIMUM_DATE
    },
    onChange: function onChange(_ref2) {
      var startDate = _ref2.startDate;
      handleChange({
        currentTarget: {
          name: 'exampleDatePicker',
          value: startDate
        }
      });
    },
    startDate: formState.exampleDatePicker
  })), /*#__PURE__*/React.createElement(Field, {
    hintText: "Example hint text."
  }, /*#__PURE__*/React.createElement(Select, {
    label: "Example select",
    onChange: function onChange(value) {
      handleChange({
        currentTarget: {
          name: 'exampleSelect',
          value: value
        }
      });
    },
    value: formState.exampleSelect
  }, /*#__PURE__*/React.createElement(SelectOption, {
    value: "one"
  }, "One"), /*#__PURE__*/React.createElement(SelectOption, {
    value: "two"
  }, "Two"), /*#__PURE__*/React.createElement(SelectOption, {
    value: "three"
  }, "Three"), /*#__PURE__*/React.createElement(SelectOption, {
    value: "four"
  }, "Four"))), /*#__PURE__*/React.createElement(Field, {
    hintText: "Example hint text."
  }, /*#__PURE__*/React.createElement(Autocomplete, {
    label: "Example autocomplete",
    onChange: function onChange(value) {
      handleChange({
        currentTarget: {
          name: 'exampleAutocomplete',
          value: value
        }
      });
    },
    value: formState.exampleAutocomplete
  }, /*#__PURE__*/React.createElement(AutocompleteOption, {
    value: "one"
  }, "One"), /*#__PURE__*/React.createElement(AutocompleteOption, {
    value: "two"
  }, "Two"), /*#__PURE__*/React.createElement(AutocompleteOption, {
    value: "three"
  }, "Three"), /*#__PURE__*/React.createElement(AutocompleteOption, {
    value: "four"
  }, "Four"))), /*#__PURE__*/React.createElement(Field, {
    hintText: "Example hint text."
  }, /*#__PURE__*/React.createElement(RangeSlider, {
    onChange: function onChange(values) {
      handleChange({
        currentTarget: {
          name: 'exampleRangeSlider',
          value: values
        }
      });
    },
    values: formState.exampleRangeSlider,
    domain: [0, 40],
    mode: 1,
    tracksLeft: true,
    step: 2
  })), /*#__PURE__*/React.createElement(Button, {
    type: "submit",
    isDisabled: isSubmitting
  }, "Submit")), /*#__PURE__*/React.createElement("pre", null, JSON.stringify(formPayload, null, 2)));
};
export default {
  title: 'Forms/Usage/Native',
  component: Example
};
var Template = function Template(args) {
  return /*#__PURE__*/React.createElement(Example, args);
};
export var Default = Template.bind({});
Default.args = {
  initialValues: EMPTY_FORM_VALUES,
  initialErrors: {
    email: true
  }
};
export var Prepopulated = Template.bind({});
Prepopulated.args = {
  initialValues: PREPOPULATED_FORM_VALUES
};