import type { ComponentProps } from "react";
import React from "react";
import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
import { FormatFile, FormatFileThumbnail } from "@jobber/components-native";
import type { File, FormatFileThumbnailProps } from "@jobber/components-native";
import { FormatFileBasic } from "./docs";

const meta = {
  title: "Components/Images and Icons/FormatFile",
  component: FormatFile,
  parameters: {
    viewport: { defaultViewport: "mobile1" },
    showNativeOnWebDisclaimer: true,
  },
} satisfies Meta<typeof FormatFile>;
export default meta;
type Story = StoryObj<Partial<ComponentProps<typeof FormatFile>>>;
type ThumbnailStory = StoryObj<Partial<FormatFileThumbnailProps<File>>>;

const videoWithoutPreviewFile = {
  fileName: "video.mp4",
  contentType: "video/quicktime",
  url: undefined,
  thumbnailUrl: undefined,
  fileSize: 1024,
} satisfies File;

export const Image: Story = {
  render: FormatFileBasic,
  args: {
    file: {
      fileName: "image.png",
      contentType: "image/png",
      url: "https://picsum.photos/250",
      thumbnailUrl: "https://picsum.photos/250",
      fileSize: 1024,
    },
  },
};

export const ImageGrid: Story = {
  render: FormatFileBasic,
  args: {
    file: {
      fileName: "image.png",
      contentType: "image/png",
      url: "https://picsum.photos/250",
      thumbnailUrl: "https://picsum.photos/250",
      fileSize: 1024,
    },
    styleInGrid: true,
  },
};

export const Video: Story = {
  render: FormatFileBasic,
  args: {
    file: {
      fileName: "video.mp4",
      contentType: "video/quicktime",
      url: "https://picsum.photos/250",
      thumbnailUrl: "https://picsum.photos/250",
      fileSize: 1024,
    },
  },
};

export const VideoWithoutPreview: Story = {
  render: FormatFileBasic,
  args: {
    file: videoWithoutPreviewFile,
  },
};

export const PDF: Story = {
  render: FormatFileBasic,
  args: {
    file: {
      fileName: "document.pdf",
      contentType: "application/pdf",
      url: "https://picsum.photos/250",
      thumbnailUrl: "https://picsum.photos/250",
      fileSize: 1024,
    },
  },
};

export const ThumbnailSurfaceColor: ThumbnailStory = {
  render: FormatFileThumbnailBasic,
  args: {
    file: videoWithoutPreviewFile,
    size: { width: 96, height: 96 },
    surfaceColor: "var(--color-surface)",
    accessibilityLabel: "Video file without preview",
  },
};

function FormatFileThumbnailBasic(
  props: Partial<FormatFileThumbnailProps<File>>,
) {
  return (
    <FormatFileThumbnail
      file={videoWithoutPreviewFile}
      size={{ width: 96, height: 96 }}
      {...props}
    />
  );
}