import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { action } from 'storybook/actions';
import './FileUploader.svelte';
import '../fileuploaderitem/FileUploaderItem.svelte';
const meta = {
    title: 'Form elements/File Uploader',
    component: 'm-file-uploader',
    subcomponents: {
        FileUploaderItem: 'm-file-uploader-item',
        Field: 'm-field',
    },
    tags: ['v2'],
    args: {
        id: 'id',
        files: [],
        label: 'Label',
        helptext: 'Help text',
        helpid: 'helpid',
        necessityindicator: '(required)',
        hasdragdrop: true,
        showfileslist: true,
        disabled: false,
        title: 'Drag & drop',
        subtitle: 'or',
        uploadbuttonlabel: 'Upload file(s)',
        multiple: true,
        deletebuttonlabel: 'Delete',
        information: 'Additional file information',
        errormessage: 'Error message (Be concise and use comprehensive words).',
    },
    argTypes: {
        files: {
            description: 'Model binding for the selected files',
            table: {
                type: {
                    summary: '{ name: string; size?: number; type?: HTMLInputElement["accept"]}[]',
                },
            },
        },
        format: {
            control: 'radio',
            options: ['inline', 'stacked'],
        },
        name: {
            description: 'Slot for customizing the file name display.',
            table: {
                category: 'Slots',
            },
        },
        information: {
            description: 'Slot for displaying additional file information.',
            table: {
                category: 'Slots',
            },
        },
        errormessage: {
            description: 'Slot for providing a custom error message.',
            table: {
                category: 'Slots',
            },
        },
    },
    render: (args) => {
        return html `
      <m-file-uploader
        id="${args.id}"
        .files="${args.files}"
        label="${args.label}"
        helptext="${ifDefined(args.helptext)}"
        helpid="${ifDefined(args.helpid)}"
        necessityindicator="${ifDefined(args.necessityindicator)}"
        .hasdragdrop="${ifDefined(args.hasdragdrop)}"
        .showfileslist="${ifDefined(args.showfileslist)}"
        .disabled="${ifDefined(args.disabled)}"
        title="${ifDefined(args.title)}"
        subtitle="${ifDefined(args.subtitle)}"
        uploadbuttonlabel="${ifDefined(args.uploadbuttonlabel)}"
        .multiple="${ifDefined(args.multiple)}"
        deletebuttonlabel="${ifDefined(args.deletebuttonlabel)}"
        information="${ifDefined(args.information)}"
        errormessage="${ifDefined(args.errormessage)}"
        format="${ifDefined(args.format)}"
        @validation="${action('validation')}"
        @files-update="${action('files-update')}"
      >
      </m-file-uploader>
    `;
    },
};
export default meta;
export const Default = {
    args: {},
};
export const WithoutDragAndDrop = {
    args: {
        hasdragdrop: false,
    },
};
export const Disabled = {
    args: {
        disabled: true,
    },
};
export const InlineFileWithError = {
    args: {
        valid: false,
        file: {
            name: 'File.txt',
        },
        information: 'Additional information',
    },
    render: (args) => {
        return html `
      <div style="width: 400px">
        <m-file-uploader-item
          .valid="${args.valid}"
          .file="${args.file}"
          information="${args.information}"
        >
        </m-file-uploader-item>
      </div>
    `;
    },
};
export const StackedFileItem = {
    args: {
        valid: true,
        file: {
            name: 'File.txt',
        },
        format: 'stacked',
        information: 'Additional information',
        deletebuttonlabel: 'Delete',
    },
    render: (args) => {
        return html `
      <div style="width: 400px">
        <m-file-uploader-item
          .valid="${args.valid}"
          .file="${args.file}"
          format="${args.format}"
          information="${args.information}"
          deletebuttonlabel="${args.deletebuttonlabel}"
        >
        </m-file-uploader-item>
      </div>
    `;
    },
};
export const StackedFileWithError = {
    args: {
        valid: false,
        file: {
            name: 'File.txt',
        },
        format: 'stacked',
        information: 'Additional information',
        deletebuttonlabel: 'Delete',
    },
    render: (args) => {
        return html `
      <div style="width: 400px">
        <m-file-uploader-item
          .valid="${args.valid}"
          .file="${args.file}"
          format="${args.format}"
          information="${args.information}"
          deletebuttonlabel="${args.deletebuttonlabel}"
        >
        </m-file-uploader-item>
      </div>
    `;
    },
};
