import errorMessageIconBase64 from './icons/errorMessageIconBase64';

export const labelControl = {
  label: {
    name: 'Label',
    control: { type: 'text' },
  },
};

export const helperTextControl = {
  'helper-text': {
    name: 'Helper Text',
    control: { type: 'text' },
  },
};

export const placeholderControl = {
  placeholder: {
    name: 'Placeholder',
    control: { type: 'text' },
  },
};

export const sizeControl = {
  size: {
    name: 'Size',
    options: ['xs', 'sm', 'md', 'lg'],
    control: { type: 'select' },
  },
};

export const loadingControl = {
  loading: {
    name: 'Loading',
    control: { type: 'boolean' },
  },
};

export const fullWidthControl = {
  'full-width': {
    name: 'Full Width',
    control: { type: 'boolean' },
  },
};

export const disabledControl = {
  disabled: {
    name: 'Disabled',
    control: { type: 'boolean' },
  },
};

export const readOnlyControl = {
  readonly: {
    name: 'Read Only',
    control: { type: 'boolean' },
  },
};

export const requiredControl = {
  required: {
    name: 'Required',
    control: { type: 'boolean' },
  },
};

export const directionControl = {
  direction: {
    name: 'Direction',
    options: ['ltr', 'rtl'],
    control: { type: 'select' },
  },
};

export const borderedControl = {
  bordered: {
    name: 'Bordered',
    control: { type: 'boolean' },
  },
};

export const minLengthControl = {
  minlength: {
    name: 'Min. Length',
    control: { type: 'number' },
  },
};

export const maxLengthControl = {
  maxlength: {
    name: 'Max. Length',
    control: { type: 'number' },
  },
};

export const textContentControl = {
  text: {
    name: 'Content',
    control: { type: 'text' },
  },
};

export const modeControl = {
  mode: {
    name: 'Mode',
    options: ['none', 'primary', 'secondary', 'success', 'error'],
    control: { type: 'select' },
  },
};

export const textAlignControl = {
  'text-align': {
    name: 'Text Align',
    options: ['left', 'center', 'right'],
    control: { type: 'select' },
  },
};

export const errorMissingValueControl = {
  'data-errormessage-value-missing': {
    name: 'Custom Error: Mandatory',
    control: { type: 'text' },
  },
};

export const errorPatternMismatchControl = {
  'data-errormessage-pattern-mismatch': {
    name: 'Custom Error: Pattern Mismatch',
    control: { type: 'text' },
  },
};

export const errorTypeMismatchControl = {
  'data-errormessage-type-mismatch': {
    name: 'Custom Error: Type Mismatch',
    control: { type: 'text' },
  },
};

export const errorBadInputControl = {
  'data-errormessage-bad-input': {
    name: 'Custom Error: Bad Input',
    control: { type: 'text' },
  },
};

export const errorRangeUnderflowControl = {
  'data-errormessage-range-underflow': {
    name: 'Custom Error: Below minimum value',
    control: { type: 'text' },
  },
};

export const errorRangeOverflowControl = {
  'data-errormessage-range-overflow': {
    name: 'Custom Error: Exceeds maximum value',
    control: { type: 'text' },
  },
};

export const fillControl = {
  'st-fill': {
    name: 'Fill',
    control: { type: 'color' },
  },
};

export const customHeightControl = {
  'st-host-height': {
    name: 'Custom Height',
    control: { type: 'text' },
  },
};

export const customWidthControl = {
  'st-host-width': {
    name: 'Custom Width',
    control: { type: 'text' },
  },
};

export const checkboxValueControl = {
  checked: {
    name: 'Checked',
    control: { type: 'boolean' },
  },
};

export const buttonVariantControl = {
  variant: {
    name: 'Button Variant',
    options: ['contained', 'outline', 'link'],
    control: { type: 'select' },
  },
};

export const boxShadowControl = {
  shadow: {
    name: 'Shadow',
    options: ['sm', 'md', 'lg', 'xl', '2xl'],
    control: { type: 'select' },
  },
};

export const borderRadiusControl = {
  'border-radius': {
    name: 'Radius',
    options: ['sm', 'md', 'lg', 'xl', '2xl', '3xl'],
    control: { type: 'select' },
  },
};

export const imgSrcControl = {
  src: {
    name: 'Image Source',
    control: { type: 'text' },
  },
};

export const typographyVariantControl = {
  variant: {
    name: 'Variant',
    options: ['h1', 'h2', 'h3', 'subtitle1', 'subtitle2', 'body1', 'body2'],
    control: { type: 'select' },
  },
};

export const overrideRenderItemControl = {
  overrideRenderItem: {
    name: 'Override the default item renderer function',
    control: { type: 'boolean' },
  },
};

export const itemsSourceControl = {
  itemsSource: {
    name: 'Where to take the items from',
    control: {
      type: 'select',
      labels: {
        children: 'Children',
        attr: '"data" attribute',
        prop: '"data" property',
      },
    },
    options: ['children', 'attr', 'prop'],
  },
};

export const minItemsSelectionControl = {
  minItemsSelection: {
    name: 'Min Items Selection',
    control: { type: 'number' },
  },
};

export const maxItemsSelectionControl = {
  maxItemsSelection: {
    name: 'Max Items Selection',
    control: { type: 'number' },
  },
};

export const labelSpacingControl = {
  'label-spacing': {
    name: 'Label Spacing',
    control: { type: 'range', min: 0, max: 200, step: 1 },
  },
};

export const inputLabelTypeControl = {
  'label-type': {
    name: 'Label Type',
    control: {
      type: 'select',
    },
    options: ['static', 'floating'],
  },
};

export const inputCopyToClipboardControl = {
  'copy-to-clipboard': {
    name: 'Copy to clipboard',
    control: {
      type: 'boolean',
    },
  },
};

export const errorMessageIconControl = {
  errorMsgIcon: {
    name: 'Error Message Icon',
    control: {
      type: 'boolean',
    },
  },
};

export const defaultValueMissingControl = {
  defaultErrorMessageValueMissing: {
    name: 'Default error-message: Value missing',
    control: {
      type: 'boolean',
    },
  },
};

export const defaultPatternMismatchControl = {
  defaultErrorMessagePatternMismatch: {
    name: 'Default error-message: Pattern mismatch',
    control: {
      type: 'boolean',
    },
  },
};

export const errorMessageIconAttrs = `
    st-error-message-icon="url(${errorMessageIconBase64})"
    st-error-message-icon-size="14px"
    st-error-message-icon-padding="1.5em"
  `;

export const tooltipPositionControl = {
  tooltipPosition: {
    control: { type: 'select' },
    options: [
      'top',
      'top-start',
      'top-end',
      'bottom',
      'bottom-start',
      'bottom-end',
      'start',
      'start-top',
      'start-bottom',
      'end',
      'end-top',
      'end-bottom',
    ],
  },
};

export const obfuscatedControl = {
  obfuscated: {
    name: 'Toggle input obfuscation',
    control: {
      type: 'boolean',
    },
  },
};

export const valueControl = {
  value: {
    name: 'Input Value',
    control: {
      type: 'text',
    },
  },
};
