import { componentName } from '../src/components/descope-hybrid-field';
import {
  labelControl,
  placeholderControl,
  sizeControl,
  fullWidthControl,
  directionControl,
  disabledControl,
  readOnlyControl,
  requiredControl,
  borderedControl,
  inputLabelTypeControl,
  errorMessageIconControl,
  errorMessageIconAttrs,
} from './commonControls';
import CountryCodes from '../src/components/phone-fields/CountryCodes';

const Template = ({
  label,
  placeholder,
  size,
  bordered,
  direction,
  disabled,
  required,
  readonly,
  'label-type': labelType,
  'full-width': fullWidth,
  'external-input': externalInput,
  'data-errormessage-pattern-mismatch-email': emailCustomErrorTypeMismatch,
  'data-errormessage-value-missing-email': emailCustomErrorMissingValue,
  'data-errormessage-value-missing-phone': phoneCustomErrorMissingValue,
  // phone
  'phone-input-label': phoneInputLabel,
  'country-input-label': countryInputLabel,
  'country-input-placeholder': countryInputPlaceholder,
  'default-code': defaultCode,
  'restrict-countries': restrictCountries,
  'phone-variant': phoneVariant,
  'phone-minlength': phoneMinLength,
  'phone-format-value': phoneFormatValue,
  'phone-strict-validation': phoneStrictValidation,
  errorMsgIcon,
}) => `
    <descope-hybrid-field
      size="${size}"
      bordered="${bordered}"
      disabled="${disabled || false}"
      required="${required || false}"
      readonly="${readonly || false}"
      full-width="${fullWidth || false}"
      st-host-direction="${direction ?? ''}"
      external-input="${externalInput || false}"
      label-type="${labelType || 'static'}"
      phone-variant="${phoneVariant || ''}"
      label="${label || ''}"
      placeholder="${placeholder || ''}"
      phone-input-label="${phoneInputLabel || ''}"
      phone-format-value="${phoneFormatValue || false}"
      phone-strict-validation="${phoneStrictValidation || false}"
      country-input-label="${countryInputLabel || ''}"
      country-input-placeholder="${countryInputPlaceholder || ''}"
      default-code="${defaultCode || ''}"
      restrict-countries="${restrictCountries || ''}"
      phone-minlength="${phoneMinLength || ''}"
      data-errormessage-value-missing-email="${emailCustomErrorMissingValue || ''}"
      data-errormessage-pattern-mismatch-email="${emailCustomErrorTypeMismatch || ''}"
      data-errormessage-value-missing-phone="${phoneCustomErrorMissingValue || ''}"
      ${errorMsgIcon ? errorMessageIconAttrs : ''}
    ></descope-hybrid-field>
  <div>
    <button id="validate">Validate</button>
  </div>
  `;

export default {
  component: componentName,
  title: 'descope-hybrid-field',
  decorators: [
    (story, { args }) => {
      setTimeout(() => {
        const button = document.querySelector('#validate');
        const ele = document.querySelector('descope-hybrid-field');
        button.onclick = () => {
          ele.reportValidity();
        };
      });
      return story();
    },
  ],
  argTypes: {
    ...labelControl,
    ...placeholderControl,
    ...inputLabelTypeControl,
    ...sizeControl,
    ...fullWidthControl,
    ...disabledControl,
    ...readOnlyControl,
    ...requiredControl,
    ...borderedControl,
    ...directionControl,
    ...errorMessageIconControl,
    'external-input': {
      control: { type: 'boolean' },
    },
    // phone
    'phone-input-label': {
      control: { type: 'text' },
    },
    'country-input-label': {
      control: { type: 'text' },
    },
    'country-input-placeholder': {
      control: { type: 'text' },
    },
    'default-code': {
      options: [''].concat(CountryCodes.map((c) => c.code)),
      control: { type: 'select' },
    },
    'restrict-countries': {
      control: { type: 'text' },
    },
    'phone-variant': {
      options: ['countrySelection', 'inputBox'],
      control: { type: 'select' },
    },
    'phone-minlength': {
      control: { type: 'number' },
    },
    'phone-format-value': {
      name: 'Format Value',
      control: { type: 'boolean' },
    },
    'phone-strict-validation': {
      name: 'Strict Validation',
      control: { type: 'boolean' },
    },
  },
};

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

Default.args = {
  size: 'md',
  bordered: true,
  'restrict-countries': 'IL,US', // for test purposes, as Storybook cannot load preview url with comma separted values
  'data-errormessage-value-missing-phone': 'missing phone',
  'data-errormessage-value-missing-email': 'missing email',
  'data-errormessage-pattern-mismatch-email': 'pattern mismatch email',
  'phone-minlength': 8,
};
