import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import type { FileInputItem } from '../../Inputs/FileInput/hooks';

import { FileField } from './FileField';

const meta: Meta<typeof FileField> = {
  title: 'UI kit/Form/FileField',
  component: FileField,
  tags: ['autodocs'],
};

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

export const Default: Story = {
  args: {
    label: 'File:',
    showImagePreview: true,
  },
};

export const Multiple: Story = {
  args: {
    label: 'File:',
    multiple: true,
  },
};

export const MaxFiles: Story = {
  args: {
    label: 'File:',
    hint: 'Max 3 files',
    tooltip: 'Select a file',
    multiple: true,
    maxFiles: 3,
  },
};

export const Accept: Story = {
  args: {
    label: 'File:',
    hint: 'Only .pdf files',
    tooltip: 'Select a file',
    accept: '.pdf',
  },
};

export const Error: Story = {
  args: {
    label: 'File:',
    error: 'Required',
  },
};

export const MultipleErrors: Story = {
  args: {
    label: 'File:',
    error: ['Required', 'Invalid file type'],
    multiple: true,
  },
};

export const Tooltip: Story = {
  args: {
    label: 'File:',
    tooltip: 'Select a file',
  },
};

export const Justify: Story = {
  args: {
    label: 'File:',
    justify: true,
  },
};

export const Medium: Story = {
  args: {
    label: 'File:',
    width: 'md',
  },
};

export const Large: Story = {
  args: {
    label: 'File:',
    width: 'lg',
  },
};

export const Disabled: Story = {
  args: {
    label: 'File:',
    disabled: true,
  },
};

const INITIAL_FILES: FileInputItem[] = [{ id: 'uploaded-1', name: 'photo.jpg', size: 24_680 }];

export const WithPreviewSrc: Story = {
  render: args => {
    const [files, setFiles] = useState<FileInputItem[]>(INITIAL_FILES);

    return (
      <FileField
        {...args}
        label='Image:'
        showImagePreview
        value={files}
        onChange={setFiles}
        getPreviewSrc={_file => 'https://picsum.photos/seed/shoptet/400/300'}
      />
    );
  },
};