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

const Template = ({
  label,
  placeholder,
  size,
  bordered,
  direction,
  disabled,
  required,
  'full-width': fullWidth,
  readonly,
  'external-input': externalInput,
  'data-errormessage-value-missing': customErrorMissingValue,
  'data-errormessage-pattern-mismatch': customErrorPatternMismatch,
  'label-type': labelType,
  errorMsgIcon,
}) => `
    <descope-email-field
      size="${size}"
      bordered="${bordered}"
      label="${label || ''}"
      placeholder="${placeholder || ''}"
      disabled="${disabled || false}"
      required="${required || false}"
      readonly="${readonly || false}"
      full-width="${fullWidth || false}"
      data-errormessage-value-missing="${customErrorMissingValue || ''}"
      data-errormessage-pattern-mismatch="${customErrorPatternMismatch || ''}"
      st-host-direction="${direction ?? ''}"
      label-type="${labelType || ''}"
      external-input="${externalInput || false}"
      ${errorMsgIcon ? errorMessageIconAttrs : ''}
    ></descope-email-field>
  `;

export default {
  component: componentName,
  title: 'descope-email-field',
  decorators: [
    (story, { args }) => {
      args.validateOnBlur &&
        setTimeout(() => {
          document.querySelector('descope-email-field').addEventListener('blur', (e) => {
            e.target.setAttribute('invalid', 'true');
          });
        });

      return story();
    },
    toggleDefaultErrorMessageValueMissingDecorator,
    toggleDefaultErrorMessagePatternMismatchDecorator,
    withForm,
  ],
  argTypes: {
    ...labelControl,
    ...placeholderControl,
    ...inputLabelTypeControl,
    ...sizeControl,
    ...fullWidthControl,
    ...disabledControl,
    ...readOnlyControl,
    ...requiredControl,
    ...borderedControl,
    ...errorMissingValueControl,
    ...errorPatternMismatchControl,
    ...errorPatternMismatchControl,
    ...directionControl,
    ...errorMessageIconControl,
    ...defaultValueMissingControl,
    ...defaultPatternMismatchControl,
    'external-input': {
      control: { type: 'boolean' },
    },
  },
};

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

Default.args = {
  size: 'md',
  bordered: true,
  validateOnBlur: false,
  'data-errormessage-value-missing': 'Please fill out this field.',
  'data-errormessage-pattern-mismatch': 'Please match the requested format.',
};
