import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import FileUploader from '../components/FormElements/File/File';
import Icons from '../constants/IconArray.js'

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Form elements/File',
  component: FileUploader,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    fileType: {control: {type: 'radio', options: ["button", "dragdrop"]}},
    size: {defaultValue: 'default', control:{ type:"select", options:["default", "small", "medium", "large"]}},
    varient: {defaultValue: 'default', control:{ type:"select", options:["default", "primary", "secondary", "dark"]}},
    disable: { control: {type: 'boolean'} },
    withIcon: { control: {type: 'boolean'} },
    borderRadious: {control:{ type:"select", options:["small", "medium", "large"]}},
    iconName: {defaultValue: 'date',control:{type: 'select', options:Icons}}
  },
} as ComponentMeta<typeof FileUploader>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof FileUploader> = (args) => <FileUploader {...args} />;

export const Button = Template.bind({});
Button.args = {
  buttonLabel: 'Choose File',
  fileType: 'button',
  labelText: 'Upload File',
  labelDescription: 'Max file size is 500kb. Only .jpg files are supported.'
};

export const DragDrop = Template.bind({});
DragDrop.args = {
  fileType: 'dragdrop',
  labelText: 'Upload File',
  labelTittle: 'Drag and drop some files here or click to select files',
  labelDescription: 'Max file size is 500kb. Only .jpg files are supported.',
  withIcon: true
};