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

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

const meta: Meta<typeof FileInput.Container> = {
  title: 'UI kit/Form/Inputs/FileInput',
  component: FileInput.Container,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    disabled: {
      control: { type: 'boolean' },
    },
    multiple: {
      control: { type: 'boolean' },
    },
    accept: {
      control: { type: 'text' },
    },
  },
};

export default meta;
type Story = StoryObj<typeof FileInput.Container>;

// Mock stored file
const createMockStoredFile = (name: string): FileInputItem => ({
  id: `file-${Math.random()}`,
  name,
  size: 1024,
});

export const Default: Story = {
  render: args => {
    const fileInputHook = FileInput.useFileInput({
      multiple: args.multiple,
      accept: args.accept,
      disabled: args.disabled,
    });

    const { files, add, remove, replace, inputProps } = fileInputHook;

    return (
      <div style={{ width: '400px' }}>
        <FileInput.Container ref={fileInputHook.inputRef} {...inputProps} {...args}>
          {files.map((file, index) => (
            <FileInput.Item
              key={`${getFileName(file)}-${index}`}
              file={file}
              width='md'
              showImagePreview={!args.multiple}
              disabled={args.disabled}
              onRemove={() => remove(index)}
              onReplace={() => replace(index)}
            />
          ))}
          <FileInput.Button onClick={add} disabled={args.disabled}>
            {files.length > 0 ? 'Add more files' : 'Choose file'}
          </FileInput.Button>
        </FileInput.Container>
      </div>
    );
  },
  args: {
    disabled: false,
    multiple: false,
  },
  parameters: {
    docs: {
      description: {
        story: 'Basic FileInput with ability to select and manage files.',
      },
    },
  },
};

export const Multiple: Story = {
  render: args => {
    const fileInputHook = FileInput.useFileInput({
      multiple: true,
      accept: args.accept,
      disabled: args.disabled,
    });

    const { files, add, remove, replace, inputProps } = fileInputHook;

    return (
      <div style={{ width: '400px' }}>
        <FileInput.Container ref={fileInputHook.inputRef} {...inputProps} {...args}>
          {files.map((file, index) => (
            <FileInput.Item
              key={`${getFileName(file)}-${index}`}
              file={file}
              width='md'
              showImagePreview={false}
              disabled={args.disabled}
              onRemove={() => remove(index)}
              onReplace={() => replace(index)}
            />
          ))}
          <FileInput.Button onClick={add} disabled={args.disabled}>
            {files.length > 0 ? 'Add more files' : 'Choose files'}
          </FileInput.Button>
        </FileInput.Container>
      </div>
    );
  },
  args: {
    disabled: false,
    multiple: true,
  },
  parameters: {
    docs: {
      description: {
        story: 'FileInput allowing multiple file selection.',
      },
    },
  },
};

export const WithPreloadedFiles: Story = {
  render: args => {
    const fileInputHook = FileInput.useFileInput({
      multiple: true,
      accept: args.accept,
      disabled: args.disabled,
      value: [
        createMockStoredFile('document.pdf'),
        createMockStoredFile('image.jpg'),
        createMockStoredFile('spreadsheet.xlsx'),
      ],
    });

    const { files, add, remove, replace, inputProps } = fileInputHook;

    return (
      <div style={{ width: '400px' }}>
        <FileInput.Container ref={fileInputHook.inputRef} {...inputProps} {...args}>
          {files.map((file, index) => (
            <FileInput.Item
              key={`${getFileName(file)}-${index}`}
              file={file}
              width='md'
              showImagePreview={false}
              disabled={args.disabled}
              onRemove={() => remove(index)}
              onReplace={() => replace(index)}
            />
          ))}
          <FileInput.Button onClick={add} disabled={args.disabled}>
            Add more files
          </FileInput.Button>
        </FileInput.Container>
      </div>
    );
  },
  args: {
    disabled: false,
    multiple: true,
  },
  parameters: {
    docs: {
      description: {
        story: 'FileInput with preloaded files to demonstrate file management.',
      },
    },
  },
};

export const WithFileTypes: Story = {
  render: args => {
    const fileInputHook = FileInput.useFileInput({
      multiple: args.multiple,
      accept: '.pdf,.doc,.docx',
      disabled: args.disabled,
    });

    const { files, add, remove, replace, inputProps } = fileInputHook;

    return (
      <div style={{ width: '400px' }}>
        <FileInput.Container ref={fileInputHook.inputRef} {...inputProps} {...args}>
          {files.map((file, index) => (
            <FileInput.Item
              key={`${getFileName(file)}-${index}`}
              file={file}
              width='md'
              showImagePreview={!args.multiple}
              disabled={args.disabled}
              onRemove={() => remove(index)}
              onReplace={() => replace(index)}
            />
          ))}
          <FileInput.Button onClick={add} disabled={args.disabled}>
            Choose document
          </FileInput.Button>
        </FileInput.Container>
        <div style={{ marginTop: '8px', fontSize: '12px', color: '#666' }}>Accepts: .pdf, .doc, .docx files only</div>
      </div>
    );
  },
  args: {
    disabled: false,
    multiple: false,
    accept: '.pdf,.doc,.docx',
  },
  parameters: {
    docs: {
      description: {
        story: 'FileInput restricted to specific file types (documents only).',
      },
    },
  },
};

export const DisabledState: Story = {
  render: args => {
    const fileInputHook = FileInput.useFileInput({
      multiple: true,
      accept: args.accept,
      disabled: true,
      value: [createMockStoredFile('locked-document.pdf'), createMockStoredFile('readonly-file.txt')],
    });

    const { files, add, remove, replace, inputProps } = fileInputHook;

    return (
      <div style={{ width: '400px' }}>
        <FileInput.Container ref={fileInputHook.inputRef} {...inputProps} {...args}>
          {files.map((file, index) => (
            <FileInput.Item
              key={`${getFileName(file)}-${index}`}
              file={file}
              width='md'
              showImagePreview={false}
              disabled={true}
              onRemove={() => remove(index)}
              onReplace={() => replace(index)}
            />
          ))}
          <FileInput.Button onClick={add} disabled={true}>
            Choose files
          </FileInput.Button>
        </FileInput.Container>
      </div>
    );
  },
  args: {
    disabled: true,
    multiple: true,
  },
  parameters: {
    docs: {
      description: {
        story: 'FileInput in disabled state with existing files.',
      },
    },
  },
};

export const WithValidationStates: Story = {
  render: args => {
    const fileInputHook = FileInput.useFileInput({
      multiple: true,
      accept: args.accept,
      disabled: args.disabled,
      value: [
        createMockStoredFile('valid-file.pdf'),
        createMockStoredFile('invalid-file.exe'),
        createMockStoredFile('warning-file.txt'),
      ],
    });

    const { files, add, remove, replace, inputProps } = fileInputHook;

    return (
      <div style={{ width: '400px' }}>
        <FileInput.Container ref={fileInputHook.inputRef} {...inputProps} {...args}>
          {files.map((file, index) => (
            <FileInput.Item
              key={`${getFileName(file)}-${index}`}
              file={file}
              width='md'
              showImagePreview={false}
              disabled={args.disabled}
              error={index === 1} // Second file has error
              warning={index === 2} // Third file has warning
              onRemove={() => remove(index)}
              onReplace={() => replace(index)}
            />
          ))}
          <FileInput.Button onClick={add} disabled={args.disabled}>
            Add more files
          </FileInput.Button>
        </FileInput.Container>
      </div>
    );
  },
  args: {
    disabled: false,
    multiple: true,
  },
  parameters: {
    docs: {
      description: {
        story: 'FileInput showing different validation states: normal, error, and warning.',
      },
    },
  },
};

export const WithTooltipAndLabels: Story = {
  render: args => {
    const fileInputHook = FileInput.useFileInput({
      multiple: true,
      accept: args.accept,
      disabled: args.disabled,
      value: [createMockStoredFile('report.pdf'), createMockStoredFile('data.csv')],
    });

    const { files, add, remove, replace, inputProps } = fileInputHook;

    return (
      <div style={{ width: '400px' }}>
        <FileInput.Container ref={fileInputHook.inputRef} {...inputProps} {...args}>
          {files.map((file, index) => (
            <FileInput.Item
              key={`${getFileName(file)}-${index}`}
              file={file}
              width='md'
              showImagePreview={false}
              disabled={args.disabled}
              onRemove={() => remove(index)}
              onReplace={() => replace(index)}
              tooltip={index === 0 ? 'This file contains the monthly report' : undefined}
              labelAfter={index === 1 ? 'Required' : undefined}
            />
          ))}
          <FileInput.Button onClick={add} disabled={args.disabled} tooltip='Click to select files from your computer'>
            Add files
          </FileInput.Button>
        </FileInput.Container>
      </div>
    );
  },
  args: {
    disabled: false,
    multiple: true,
  },
  parameters: {
    docs: {
      description: {
        story: 'FileInput with tooltips and labels for enhanced user guidance.',
      },
    },
  },
};