import type { Meta, StoryObj } from '@storybook/react-webpack5';
import { fn } from 'storybook/test';

import Upload from '.';
import { MAX_SIZE_DEFAULT } from './Upload';

const meta = {
  component: Upload,
  title: 'Forms/Upload',
  args: {
    // Set all props to undefined so Storybook can auto-detect them
    animationDelay: undefined,
    csButtonText: undefined,
    csFailureText: undefined,
    csSuccessText: undefined,
    csTooLargeMessage: undefined,
    csWrongTypeMessage: undefined,
    httpOptions: undefined,
    fetcher: undefined,
    maxSize: undefined,
    psButtonText: undefined,
    psButtonDisabled: undefined,
    psProcessingText: undefined,
    size: undefined,
    usAccept: undefined,
    usButtonText: undefined,
    usButtonRetryText: undefined,
    usDisabled: undefined,
    usDropMessage: undefined,
    usHelpImage: undefined,
    usLabel: undefined,
    usPlaceholder: undefined,
    errorIconLabel: undefined,
    onCancel: undefined,
    onFailure: undefined,
    onStart: undefined,
    onSuccess: undefined,
    uploadStep: undefined,
  },
  argTypes: {
    maxSize: {
      control: {
        type: 'number',
        min: 0,
      },
      description:
        'Filesize expressed in Bytes.<br />If set to `null`, no size limit will be applied.',
      table: {
        type: {
          summary: 'number | null',
        },
        defaultValue: {
          summary: MAX_SIZE_DEFAULT.toString(),
          detail: '5 MB',
        },
      },
    },
    fetcher: {
      description:
        'You can provide a fetcher function with the same interface as the global fetch function, which is used by default.',
      table: {
        type: {
          summary: 'PostDataFetcher',
        },
      },
      control: false,
    },
    usAccept: {
      description:
        'You can provide multiple rules separated by comma, e.g.: "application/pdf,image/*".\nUsing "*" will allow every file type to be uploaded.',
    },
    errorIconLabel: {
      description:
        "Override for the InlinePrompt icon's default, accessible name announced by the screen readers",
    },
    usHelpImage: {
      control: false,
      table: {
        type: {
          summary: 'ReactNode',
        },
      },
    },
    httpOptions: {
      table: {
        type: {
          summary:
            'PostDataHTTPOptions & { fileInputName?: string; data?: Record<string, string | Blob>; }',
        },
      },
    },
    size: {
      table: {
        type: {
          summary: `Size.SMALL | Size.MEDIUM | Size.LARGE`,
        },
      },
    },
    uploadStep: {
      description: '**@deprecated** Only a single variant exists, please remove this prop.',
      table: {
        type: {
          summary: '"uploadImageStep"',
        },
      },
    },
    onCancel: {
      table: {
        type: {
          summary: '() => void',
        },
      },
    },
    onFailure: {
      table: {
        type: {
          summary: '(error: unknown) => void',
        },
      },
    },
    onStart: {
      table: {
        type: {
          summary: '(file: File) => void',
        },
      },
    },
    onSuccess: {
      table: {
        type: {
          summary: '(response: string | Response, fileName: string) => void',
        },
      },
    },
  },
} satisfies Meta<typeof Upload>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Basic: Story = {
  args: {
    usAccept: 'image/*',
    usLabel: 'Front of your ID document',
    usDisabled: false,
    httpOptions: {
      url: 'https://httpbin.org/post',
      method: 'POST',
    },
    onStart: fn(),
    onSuccess: fn(),
    onFailure: fn(),
    onCancel: fn(),
  },
} satisfies Story;