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

import { type FileCompleterFunction } from '../../../types/attachments';
import { getFileType } from '../../../utils/files';

import CreatePost from './CreatePost';

const URL_DATA = 'https://i.imgur.com/bLIqWdp.jpeg';
const handleFileUpload: FileCompleterFunction = async completeFile => {
  await new Promise(r => setTimeout(r, 2000));
  const url = URL.createObjectURL(completeFile.file!);
  return {
    ...completeFile,
    attachment: {
      url,
      name: completeFile.file!.name,
      type: getFileType({ type: completeFile.file!.type }),
      bytes: completeFile.file!.size,
      size: '10 KB',
    },
  };
};

const meta: Meta<typeof CreatePost> = {
  component: CreatePost,
  title: 'Composed Components/Posts/CreatePost',
  tags: ['autodocs'],
  args: {
    fullName: 'Juane Algebra',
    handlePost: data => alert(JSON.stringify(data)),
  },
};

export default meta;

type Story = StoryObj<typeof CreatePost>;

export const Default: Story = {
  args: {},
};
const attachment = {
  url: URL_DATA,
  type: 'IMAGE',
  name: 'imageeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee.jpg',
  bytes: 100000,
  size: '1000000000 KB',
};
export const EditPostWithMaxSizeAndInGB: Story = {
  args: {
    existingPost: {
      body: 'This is the original post text',
      media: [
        { id: 1, attachment },
        { id: 2, attachment },
      ],
    },
    uploadMedia: handleFileUpload,
    uploadFile: handleFileUpload,
    onCancel: () => alert('CancelButtonClicked'),
    maxAttachedSize: 10000,
  },
};

export const EditPostWithMaxSizeAndInMB: Story = {
  args: {
    existingPost: {
      body: 'This is the original post text',
      media: [
        { id: 1, attachment },
        { id: 2, attachment },
      ],
    },
    uploadMedia: handleFileUpload,
    uploadFile: handleFileUpload,
    onCancel: () => alert('CancelButtonClicked'),
    maxAttachedSize: 1000,
  },
};

export const PostWithMediaAndCustomInputSize: Story = {
  args: {
    uploadMedia: handleFileUpload,
    uploadFile: handleFileUpload,
    existingPost: {
      body: 'This is the original post text',
      files: [
        { id: 1, attachment },
        { id: 2, attachment },
        { id: 2, attachment },
      ],
    },
    maxInputSize: 100000,
  },
};