import { componentName } from '../src/components/phone-fields/descope-phone-field';
import CountryCodes from '../src/components/phone-fields/CountryCodes';
import { toggleDefaultErrorMessageValueMissingDecorator, withForm } from './helpers';
import {
  labelControl,
  sizeControl,
  fullWidthControl,
  directionControl,
  disabledControl,
  readOnlyControl,
  requiredControl,
  borderedControl,
  minLengthControl,
  maxLengthControl,
  errorMissingValueControl,
  inputLabelTypeControl,
  errorMessageIconAttrs,
  errorMessageIconControl,
  defaultValueMissingControl,
} from './commonControls';

const Template = ({
  label,
  'default-code': defaultCode,
  size,
  bordered,
  'country-input-label': countryInputLabel,
  'phone-input-placeholder': phoneInputPlaceholder,
  'country-input-placeholder': countryInputPlaceholder,
  'full-width': fullWidth,
  minlength,
  maxlength,
  readonly,
  direction,
  required,
  disabled,
  'restrict-countries': restrictCountries,
  'data-errormessage-value-missing': customErrorMissingValue,
  'label-type': labelType,
  'allow-alphanumeric-input': allowAlphanumericInput,
  'format-value': formatValue,
  'strict-validation': strictValidation,
  errorMsgIcon,
  'phone-input-type': phoneInputType,
}) =>
  `<descope-phone-field
    size="${size}"
    bordered="${bordered}"
    label="${label || ''}"
    required="${required || false}"
    country-input-label="${countryInputLabel || ''}"
    country-input-placeholder="${countryInputPlaceholder || ''}"
    phone-input-placeholder="${phoneInputPlaceholder || ''}"
    default-code="${defaultCode || ''}"
    full-width="${fullWidth || false}"
    readonly="${readonly || false}"
    disabled="${disabled || false}"
    minlength="${minlength}"
    maxlength="${maxlength}"
    restrict-countries="${restrictCountries || ''}"
    data-errormessage-value-missing="${customErrorMissingValue || ''}"
    st-host-direction="${direction ?? ''}"
    label-type="${labelType || ''}"
    allow-alphanumeric-input="${allowAlphanumericInput || false}"
    format-value="${formatValue || false}"
    strict-validation="${strictValidation || false}"
    ${errorMsgIcon ? errorMessageIconAttrs : ''}
    phone-input-type="${phoneInputType ?? ''}"
  ></descope-phone-field>
  `;
export default {
  component: componentName,
  title: 'descope-phone-field',
  decorators: [toggleDefaultErrorMessageValueMissingDecorator, withForm],
  argTypes: {
    ...labelControl,
    ...sizeControl,
    ...inputLabelTypeControl,
    ...fullWidthControl,
    ...disabledControl,
    ...readOnlyControl,
    ...requiredControl,
    ...borderedControl,
    ...minLengthControl,
    ...maxLengthControl,
    ...errorMissingValueControl,
    ...directionControl,
    ...errorMessageIconControl,
    ...defaultValueMissingControl,
    'country-input-label': {
      name: 'Code Label',
      control: { type: 'text' },
    },
    'country-input-placeholder': {
      name: 'Code Placeholder',
      control: { type: 'text' },
    },
    'phone-input-placeholder': {
      name: 'Phone Placeholder',
      control: { type: 'text' },
    },
    'default-code': {
      name: 'Default Code',
      options: [''].concat(CountryCodes.map((c) => c.code)),
      control: { type: 'select' },
    },
    'restrict-countries': {
      name: 'Allowed Countries',
      control: { type: 'text' },
    },
    'allow-alphanumeric-input': {
      control: { type: 'boolean' },
    },
    'format-value': {
      name: 'Format Value',
      control: { type: 'boolean' },
    },
    'strict-validation': {
      name: 'Strict Validation',
      control: { type: 'boolean' },
    },
    'phone-input-type': {
      name: 'Phone Input Type',
      control: { type: 'select' },
      options: ['tel', 'text'],
    },
  },
};

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': 'Please fill out this field.',
};
