import type { Meta, StoryObj } from '@storybook/html';
import { FileDropzone, type DropzoneOptions } from '@42/core/file-dropzone';
import '@42/styles/file-dropzone.css';

const meta: Meta<DropzoneOptions> = {
  title: 'Core/Inputs & Forms/FileDropzone',
  tags: ['autodocs'],
  argTypes: {
    accept: { control: 'text' },
    multiple: { control: 'boolean' },
    maxFiles: { control: 'number' },
    maxSize: { control: 'number' },
    disabled: { control: 'boolean' },
    previews: { control: 'boolean' },
  },
  args: {
    accept: 'image/*',
    multiple: true,
    maxFiles: 5,
    maxSize: 2 * 1024 * 1024,
    disabled: false,
    previews: true,
  },
  render: (args) => {
    const root = document.createElement('div');
    root.dataset.c42Dropzone = '';
    root.innerHTML = `
      <input data-c42-dropzone-input type="file" />
      <div data-c42-dropzone-zone>
        <strong>Drop files here</strong>
        <span>or click to browse</span>
      </div>
      <p data-c42-dropzone-error hidden></p>
      <ul data-c42-dropzone-list></ul>`;
    new FileDropzone(root, args);
    return root;
  },
};

export default meta;

type Story = StoryObj<DropzoneOptions>;

export const Default: Story = {};
export const SingleFile: Story = { args: { multiple: false, accept: '.pdf,.csv', previews: false } };