File Upload

import { FileUploadAdvanced } from "@carsxe/design-system/components/file-upload"

import * as React from "react"
import { PaperclipIcon } from "lucide-react"
import {
  FileUpload,
  FileUploadAdvanced,
  FileUploadInput,
  FileUploadItem,
  FileUploadList,
  FileUploadTotalProgress,
  useFileUploadContext,
  type FileUploader,
} from "@carsxe/design-system/components/file-upload"
import { Button } from "@carsxe/design-system/components/button"

/** Stands in for a real endpoint: reports progress in steps and honours cancel. Files named "fail" error. */
export const simulateUpload: FileUploader = (file, { onProgress, signal }) =>
  new Promise((resolve, reject) => {
    let sent = 0
    const step = Math.max(file.size / 12, 1)
    const timer = window.setInterval(() => {
      sent = Math.min(sent + step, file.size)
      onProgress(sent, file.size)
      if (file.name.toLowerCase().includes("fail") && sent > file.size / 2) {
        window.clearInterval(timer)
        reject(new Error("The server rejected this file."))
      } else if (sent >= file.size) {
        window.clearInterval(timer)
        resolve({ name: file.name })
      }
    }, 150)
    signal.addEventListener("abort", () => {
      window.clearInterval(timer)
      reject(new DOMException("Cancelled", "AbortError"))
    })
  })

export function FileUploadDemo() {
  return (
    <div className="w-full max-w-xl">
      <FileUploadAdvanced
        uploader={simulateUpload}
        accept={{
          "application/pdf": [".pdf"],
          "image/*": [".png", ".jpg", ".jpeg"],
        }}
        maxSize={10 * 1024 * 1024}
        maxFiles={5}
      />
    </div>
  )
}

/** Docs have no upload server, so this preview simulates one. The docs snippet shows the `url` version. */
export function FileUploadNative() {
  return (
    <div className="w-full max-w-xl">
      <FileUploadAdvanced uploader={simulateUpload} />
    </div>
  )
}

export function FileUploadAuto() {
  const [uploaded, setUploaded] = React.useState(0)
  return (
    <div className="w-full max-w-xl space-y-2">
      <FileUploadAdvanced
        auto
        uploader={simulateUpload}
        accept={{ "image/*": [".png", ".jpg", ".jpeg", ".webp"] }}
        maxSize={2 * 1024 * 1024}
        maxFiles={4}
        concurrency={2}
        onUpload={() => setUploaded((count) => count + 1)}
      />
      <p className="text-sm text-muted-foreground" aria-live="polite">
        {uploaded} {uploaded === 1 ? "photo" : "photos"} uploaded
      </p>
    </div>
  )
}

export function FileUploadSelectOnly() {
  const [names, setNames] = React.useState<string[]>([])
  return (
    <form
      className="w-full max-w-xl space-y-3"
      onSubmit={(event) => event.preventDefault()}
    >
      <FileUploadAdvanced
        multiple={false}
        accept={{ "application/pdf": [".pdf"] }}
        onValueChange={(files) => setNames(files.map((item) => item.file.name))}
        empty="No title document selected yet."
      />
      <p className="text-sm text-muted-foreground">
        Submitting with: {names.length ? names.join(", ") : "nothing"}
      </p>
    </form>
  )
}

function AttachButton() {
  const { open, files, disabled } = useFileUploadContext()
  return (
    <Button variant="outline" size="sm" onClick={open} disabled={disabled}>
      <PaperclipIcon data-icon="inline-start" aria-hidden="true" />
      Attach {files.length ? `(${files.length})` : ""}
    </Button>
  )
}

export function FileUploadCustomLayout() {
  return (
    <FileUpload
      auto
      uploader={simulateUpload}
      className="w-full max-w-xl rounded-2xl border bg-card p-4"
    >
      <div className="flex items-center justify-between gap-3">
        <div>
          <p className="text-sm font-medium">Inspection photos</p>
          <p className="text-xs text-muted-foreground">
            Built from the parts, without the dropzone.
          </p>
        </div>
        <AttachButton />
      </div>
      <FileUploadTotalProgress />
      <FileUploadList
        className="grid grid-cols-1 sm:grid-cols-2"
        renderItem={(item) => (
          <FileUploadItem item={item} size="sm" className="h-full" />
        )}
      />
      <FileUploadInput />
    </FileUpload>
  )
}