import { componentName } from '../src/components/descope-date-field';
import {
  labelControl,
  placeholderControl,
  sizeControl,
  fullWidthControl,
  directionControl,
  disabledControl,
  readOnlyControl,
  requiredControl,
  borderedControl,
  errorMissingValueControl,
  inputLabelTypeControl,
  errorRangeUnderflowControl,
  errorRangeOverflowControl,
  errorMessageIconAttrs,
  defaultValueMissingControl,
  defaultPatternMismatchControl,
} from './commonControls';
import {
  toggleDefaultErrorMessageValueMissingDecorator,
  toggleDefaultErrorMessagePatternMismatchDecorator,
} from './helpers';

const Template = ({
  label,
  placeholder,
  size,
  bordered,
  direction,
  required,
  disabled,
  readonly,
  format,
  preview,
  'disable-calendar': disableCalendar,
  'years-range': yearsRange,
  'initial-value': initialValue,
  'initial-month': initialMonth,
  'initial-year': initialYear,
  'full-width': fullWidth,
  'label-type': labelType,
  'data-errormessage-value-missing': customErrorMessage,
  'data-errormessage-pattern-mismatch': customErrorMessagePatternMismatch,
  'data-errormessage-range-underflow': customErrorRangeUnderflowMessage,
  'data-errormessage-range-overflow': customErrorRangeOverflowMessage,
  'calendar-months': dataMonths,
  'calendar-weekdays': dataWeekdays,
  'calendar-label-today': dataLabelToday,
  'calendar-label-submit': dataLabelCalendarSubmit,
  'calendar-label-cancel': dataLabelCalendarCancel,
  'utc-time': utcTime,
  errorMsgIcon,
}) => `
      <descope-date-field
        size="${size}"
        bordered="${bordered}"
        label="${label || ''}"
        label-type="${labelType || ''}"
        disabled="${disabled || false}"
        placeholder="${placeholder || ''}"
        readonly="${readonly || false}"
        required="${required || false}"
        full-width="${fullWidth || false}"
        st-host-direction="${direction ?? ''}"
        format="${format || ''}"
        initial-value="${initialValue || ''}"
        initial-month="${initialMonth || ''}"
        initial-year="${initialYear || ''}"
        preview="${preview || ''}"
        years-range="${yearsRange || ''}"
        disable-calendar="${disableCalendar || false}"
        calendar-months="${dataMonths || ''}"
        calendar-weekdays="${dataWeekdays || ''}"
        calendar-label-today="${dataLabelToday || ''}"
        calendar-label-submit="${dataLabelCalendarSubmit || ''}"
        calendar-label-cancel="${dataLabelCalendarCancel || ''}"
        data-errormessage-value-missing="${customErrorMessage || ''}"
        data-errormessage-pattern-range-underflow="${customErrorRangeUnderflowMessage || ''}"
        data-errormessage-pattern-range-overflow="${customErrorRangeOverflowMessage || ''}"
        utc-time="${utcTime || false}"
        ${errorMsgIcon ? errorMessageIconAttrs : ''}
      ></descope-date-field>
      <button id="validate">Validate</button>
  `;

export default {
  component: componentName,
  title: 'descope-date-field',
  decorators: [
    (story) => {
      setTimeout(() => {
        const button = document.querySelector('#validate');
        const ele = document.querySelector('descope-date-field');
        button.onclick = () => {
          ele.reportValidity();
        };
      });
      return story();
    },
    toggleDefaultErrorMessageValueMissingDecorator,
    toggleDefaultErrorMessagePatternMismatchDecorator,
  ],
  argTypes: {
    ...labelControl,
    ...placeholderControl,
    ...inputLabelTypeControl,
    ...sizeControl,
    ...fullWidthControl,
    ...disabledControl,
    ...readOnlyControl,
    ...requiredControl,
    ...borderedControl,
    ...errorMissingValueControl,
    ...errorRangeUnderflowControl,
    ...errorRangeOverflowControl,
    ...directionControl,
    ...defaultValueMissingControl,
    ...defaultPatternMismatchControl,
    format: {
      name: 'Date Format',
      options: ['MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD'],
      control: { type: 'select' },
    },
    'initial-value': {
      name: 'Initial Value',
      control: { type: 'text' },
    },
    'initial-year': {
      name: 'Initial Year',
      control: { type: 'number' },
    },
    'initial-month': {
      name: 'Initial Month',
      control: { type: 'number' },
    },
    preview: {
      name: 'Preview Date',
      control: { type: 'text' },
    },
    'years-range': {
      name: 'Years Range',
      control: { type: 'text' },
    },
    'calendar-months': {
      name: 'Custom Months',
      control: { type: 'text' },
    },
    'calendar-weekdays': {
      name: 'Custom Weekdays',
      control: { type: 'text' },
    },
    'disable-calendar': {
      control: { type: 'boolean' },
    },
    'utc-time': {
      control: { type: 'boolean' },
    },
  },
};

export const Default = Template.bind({});

Default.args = {
  bordered: true,
  size: 'md',
  'data-errormessage-value-missing': 'Please fill out this field.',
  'initial-value': '',
};
