import type { Meta, StoryObj } from "@storybook/vue3-vite"
import type { Asset } from "./AssetPickerFile.vue"
import AssetPickerFile from "./AssetPickerFile.vue"
import { componentDoc } from "@/lib/storybook"

const SAMPLE_ASSETS: Asset[] = [
  {
    id: "a1",
    url: "https://placehold.co/200x200?text=Hero",
    thumbnailUrl: "https://placehold.co/120x120?text=Hero",
    name: "hero.png",
    mimeType: "image/png",
    sizeBytes: 102400,
  },
  {
    id: "a2",
    url: "https://placehold.co/200x200?text=Logo",
    thumbnailUrl: "https://placehold.co/120x120?text=Logo",
    name: "logo.png",
    mimeType: "image/png",
    sizeBytes: 51200,
  },
  {
    id: "a3",
    url: "https://placehold.co/200x200?text=Banner",
    thumbnailUrl: "https://placehold.co/120x120?text=Banner",
    name: "banner.jpg",
    mimeType: "image/jpeg",
    sizeBytes: 256000,
  },
  {
    id: "a4",
    url: "https://placehold.co/200x200?text=Avatar",
    thumbnailUrl: "https://placehold.co/120x120?text=Avatar",
    name: "avatar.png",
    mimeType: "image/png",
    sizeBytes: 32768,
  },
  {
    id: "a5",
    url: "https://placehold.co/200x200?text=Bg",
    thumbnailUrl: "https://placehold.co/120x120?text=Bg",
    name: "background.png",
    mimeType: "image/png",
    sizeBytes: 819200,
  },
  {
    id: "a6",
    url: "https://placehold.co/200x200?text=Icon",
    thumbnailUrl: "https://placehold.co/120x120?text=Icon",
    name: "icon.svg",
    mimeType: "image/svg+xml",
    sizeBytes: 4096,
  },
]

function mockBrowse(): Promise<Asset[]> {
  return new Promise((resolve) => {
    setTimeout(() => resolve(SAMPLE_ASSETS), 500)
  })
}

function mockUpload(file: File): Promise<Asset> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        id: `upload-${Date.now()}`,
        url: URL.createObjectURL(file),
        thumbnailUrl: URL.createObjectURL(file),
        name: file.name,
        mimeType: file.type,
        sizeBytes: file.size,
      })
    }, 800)
  })
}

const meta = {
  title: "Elements/File/AssetPickerFile",
  component: AssetPickerFile,
  tags: ["autodocs"],
  args: {
    label: "Asset",
    onBrowse: mockBrowse,
  },
  parameters: componentDoc("AssetPickerFile", { barrel: "file" }),
  decorators: [
    () => ({
      template: '<div class="w-96 p-4"><story /></div>',
    }),
  ],
} satisfies Meta<typeof AssetPickerFile>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { label: "Asset", onBrowse: mockBrowse },
}

export const WithInitialValue: Story = {
  args: {
    label: "Hero image",
    onBrowse: mockBrowse,
    modelValue: SAMPLE_ASSETS[0],
  },
}

export const WithUpload: Story = {
  args: {
    label: "Asset",
    onBrowse: mockBrowse,
    onUpload: mockUpload,
    acceptedFileTypes: ["image/png", "image/jpeg", "image/svg+xml"],
  },
}

export const Disabled: Story = {
  args: { label: "Disabled", disabled: true, onBrowse: mockBrowse },
}

export const WithErrors: Story = {
  args: {
    label: "Asset",
    onBrowse: mockBrowse,
    errors: ["Please select an asset."],
  },
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { AssetPickerFile },
    setup() {
      return {
        onBrowse: mockBrowse,
        onUpload: mockUpload,
        initial: SAMPLE_ASSETS[0],
      }
    },
    template: `
      <div class="flex flex-col gap-4 max-w-md">
        <AssetPickerFile label="Default" :on-browse="onBrowse" />
        <AssetPickerFile
          label="With initial value"
          :on-browse="onBrowse"
          :model-value="initial"
        />
        <AssetPickerFile
          label="With upload"
          :on-browse="onBrowse"
          :on-upload="onUpload"
        />
        <AssetPickerFile label="Disabled" disabled :on-browse="onBrowse" />
        <AssetPickerFile
          label="With errors"
          :on-browse="onBrowse"
          :errors="['Please select an asset.']"
        />
      </div>
    `,
  }),
}
