import { componentName } from '../src/components/descope-upload-file';
import { withForm } from './helpers';
import {
  buttonVariantControl,
  modeControl,
  sizeControl,
  fullWidthControl,
  disabledControl,
  readOnlyControl,
  requiredControl,
  borderedControl,
  errorMissingValueControl,
  directionControl,
} from './commonControls';

const Template = ({
  title,
  description,
  'button-label': buttonLabel,
  'button-mode': buttonMode,
  'button-variant': buttonVariant,
  accept,
  size,
  bordered,
  disabled,
  required,
  'full-width': fullWidth,
  readonly,
  icon,
  'data-errormessage-value-missing': customErrorMissingValue,
  direction,
}) =>
  `
    <descope-upload-file
      size="${size}"
      bordered="${bordered}"
      title="${title || ''}"
      description="${description || ''}"
      button-label="${buttonLabel || ''}"
      button-mode="${buttonMode || 'contained'}"
      button-variant="${buttonVariant || 'primary'}"
      accept="${accept || ''}"
      disabled="${disabled || false}"
      required="${required || false}"
      readonly="${readonly || false}"
      full-width="${fullWidth || false}"
      data-errormessage-value-missing="${customErrorMissingValue || ''}"
      st-host-direction="${direction ?? ''}"
    >
      ${
        icon
          ? '<img slot="icon" src="https://imgs.descope.com/components/upload-file-outlined.svg"/>'
          : ''
      }
    </descope-upload-file>
  `;

export default {
  component: componentName,
  title: 'descope-upload-file',
  decorators: [withForm],
  argTypes: {
    title: {
      name: 'Title',
      control: { type: 'text' },
    },
    description: {
      name: 'Description',
      control: { type: 'text' },
    },
    'button-label': {
      name: 'Button Label',
      control: { type: 'text' },
    },
    accept: {
      name: 'Accept Types',
      control: { type: 'text' },
    },
    'button-mode': {
      ...modeControl.mode,
      name: 'Button Mode',
    },
    'button-variant': {
      ...buttonVariantControl.variant,
      name: 'Button Variant',
    },
    icon: {
      name: 'Show Icon?',
      control: { type: 'boolean' },
    },
    ...sizeControl,
    ...fullWidthControl,
    ...disabledControl,
    ...readOnlyControl,
    ...requiredControl,
    ...borderedControl,
    ...errorMissingValueControl,
    ...directionControl,
  },
};

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

Default.args = {
  size: 'md',
  bordered: true,
  title: 'Upload Document',
  description: 'Click the button below to upload a document',
  'button-label': 'Upload',
  accept: 'image/*',
  'button-mode': 'primary',
  'button-variant': 'contained',
};
