import { componentName } from '../src/components/descope-text-field';
import { toggleDefaultErrorMessageValueMissingDecorator, withForm } from './helpers';
import {
  labelControl,
  placeholderControl,
  sizeControl,
  fullWidthControl,
  directionControl,
  disabledControl,
  readOnlyControl,
  requiredControl,
  borderedControl,
  textAlignControl,
  errorMissingValueControl,
  helperTextControl,
  inputLabelTypeControl,
  inputCopyToClipboardControl,
  errorMessageIconControl,
  errorMessageIconAttrs,
  defaultValueMissingControl,
  obfuscatedControl,
  valueControl,
} from './commonControls';

const Template = ({
  label,
  placeholder,
  size,
  bordered,
  direction,
  required,
  disabled,
  readonly,
  obfuscated,
  value,
  'full-width': fullWidth,
  'text-align': textAlign,
  'helper-text': helperText,
  'data-errormessage-value-missing': customErrorMessage,
  'label-type': labelType,
  'copy-to-clipboard': copyToClipboard,
  errorMsgIcon,
}) => `
      <descope-text-field
        size="${size}"
        bordered="${bordered}"
        label="${label || ''}"
        disabled="${disabled || false}"
        placeholder="${placeholder || ''}"
        readonly="${readonly || false}"
        required="${required || false}"
        full-width="${fullWidth || false}"
        text-align="${textAlign || ''}"
        helper-text="${helperText || ''}"
        data-errormessage-value-missing="${customErrorMessage || ''}"
        st-host-direction="${direction ?? ''}"
        label-type="${labelType || ''}"
        copy-to-clipboard="${copyToClipboard || false}"
        ${errorMsgIcon ? errorMessageIconAttrs : ''}
        obfuscated="${obfuscated || false}"
        value="${value || ''}"
      ></descope-text-field>
  `;

export default {
  component: componentName,
  title: 'descope-text-field',
  decorators: [toggleDefaultErrorMessageValueMissingDecorator, withForm],
  argTypes: {
    ...labelControl,
    ...placeholderControl,
    ...inputLabelTypeControl,
    ...sizeControl,
    ...fullWidthControl,
    ...disabledControl,
    ...readOnlyControl,
    ...requiredControl,
    ...borderedControl,
    ...errorMissingValueControl,
    ...directionControl,
    ...textAlignControl,
    ...helperTextControl,
    ...inputCopyToClipboardControl,
    ...errorMessageIconControl,
    ...defaultValueMissingControl,
    ...obfuscatedControl,
    ...valueControl,
  },
};

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

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