Upload

<%= render Hakumi::Space::Component.new(size: :large, align: :center) do %>
  <%# Circular avatar upload %>
  <%= render Hakumi::Upload::Component.new(
    action: "#",
    name: "avatar",
    accept: "image/*",
    list_type: :avatar,
    avatar_shape: :circle,
    avatar_size: 80,
    avatar_icon: :user,
    max_size: 5.megabytes,
    show_upload_list: false
  ) %>

  <%# Square avatar upload %>
  <%= render Hakumi::Upload::Component.new(
    action: "#",
    name: "avatar",
    accept: "image/*",
    list_type: :avatar,
    avatar_shape: :square,
    avatar_size: 80,
    avatar_icon: :user,
    max_size: 5.megabytes,
    show_upload_list: false
  ) %>
<% end %>

<%= render Hakumi::Upload::Component.new(
  action: "#",
  name: "pictures_wall",
  id: "pictures-wall-upload",
  list_type: :picture_card,
  accept: "image/*",
  multiple: true,
  max_count: 6,
  inline_trigger: true,
  default_file_list: [
    { uid: "1", name: "landscape.jpg", status: "done", url: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=300&q=80" },
    { uid: "2", name: "forest.jpg", status: "done", url: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=300&q=80" }
  ]
) %>

<div style="margin-top: 12px;">
  <%= render Hakumi::Typography::Text::Component.new(type: :secondary) do %>
    Max 6 pictures. Upload button hides when limit is reached. Hover over images to view or delete.
  <% end %>
</div>

<script>

    (() => {
  const init = () => {
    const upload = document.getElementById('pictures-wall-upload')
    if (!upload?.hakumiComponent?.api) return false

    const api = upload.hakumiComponent.api

    // Listen for file changes to trigger simulated upload
    upload.addEventListener('hakumi:upload:change', (e) => {
      const fileList = e.detail.fileList || []

      // Find files in 'ready' status and simulate upload
      fileList.forEach((file) => {
        if (file.status === 'ready') {
          api.simulateUpload(file.uid, { duration: 1500, success: true })
        }
      })
    })

    return true
  }

  if (init()) return

  const onReady = () => {
    if (init()) {
      document.removeEventListener('turbo:load', onReady)
      window.removeEventListener('load', onReady)
    }
  }

  document.addEventListener('turbo:load', onReady)
  window.addEventListener('load', onReady)
})()
</script>

<%= render Hakumi::Upload::Component.new(
  action: "#",
  name: "file",
  list_type: :picture,
  accept: "image/*",
  max_size: 5.megabytes,
  max_count: 5
) do %>
  Select Images
<% end %>

<%= render Hakumi::Upload::Component.new(
  action: "#",
  name: "file",
  drag: true,
  list_type: :picture,
  accept: "image/*",
  max_size: 5.megabytes
) %>

<%= render Hakumi::Upload::Component.new(
  action: "#",
  name: "file",
  list_type: :picture,
  accept: "image/*",
  max_size: 5.megabytes,
  default_file_list: [
    { uid: "1", name: "mountains.jpg", status: "done", url: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=300&q=80" },
    { uid: "2", name: "forest.jpg", status: "done", url: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=300&q=80" }
  ]
) %>

<%= render Hakumi::Upload::Component.new(
  action: "#",
  name: "file",
  list_type: :picture_card,
  accept: "image/*",
  max_size: 5.megabytes,
  default_file_list: [
    { uid: "1", name: "gallery-1.jpg", status: "done", url: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=400&q=80" },
    { uid: "2", name: "gallery-2.jpg", status: "done", url: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=400&q=80" }
  ]
) %>

<%= render Hakumi::Upload::Component.new(
  action: "#",
  name: "file",
  disabled: true,
  default_file_list: [
    { uid: "1", name: "portfolio.pdf", status: "done" }
  ]
) do %>
  Upload disabled
<% end %>

<%= render Hakumi::Space::Component.new(size: :large, direction: :vertical, align: :start) do %>
  <%= render Hakumi::Space::Component.new(size: :middle, direction: :vertical, align: :start) do %>
    <p style="margin-bottom: 8px;">Upload component with simulated file operations:</p>
    <%= render Hakumi::Upload::Component.new(
      action: "#",
      name: "simulated_files",
      id: "simulated-upload",
      list_type: :picture,
      accept: "image/*",
      auto_upload: false
    ) do %>
      Select Images
    <% end %>
  <% end %>

  <%= render Hakumi::Space::Component.new(size: :middle, direction: :vertical, align: :start) do %>
    <p style="margin-bottom: 8px;">Control the upload programmatically:</p>
    <%= render Hakumi::Space::Component.new(direction: :horizontal, size: :small) do %>
      <%= render Hakumi::Button::Component.new(
        id: "add-file-btn",
        type: :default
      ) do %>
        Add File
      <% end %>

      <%= render Hakumi::Button::Component.new(
        id: "simulate-btn",
        type: :primary
      ) do %>
        Simulate Upload
      <% end %>

      <%= render Hakumi::Button::Component.new(
        id: "simulate-error-btn",
        type: :default,
        danger: true
      ) do %>
        Simulate Error
      <% end %>
    <% end %>
  <% end %>
<% end %>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const upload = document.getElementById('simulated-upload')
  const addBtn = document.getElementById('add-file-btn')
  const simulateBtn = document.getElementById('simulate-btn')
  const errorBtn = document.getElementById('simulate-error-btn')

  let fileCounter = 1

  // Sample image URLs for simulated files
  const sampleImages = [
    'https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=300&q=80',
    'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=300&q=80',
    'https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=300&q=80'
  ]

  addBtn.addEventListener('click', function() {
    const api = upload.hakumiComponent?.api
    if (!api) return

    // Add a simulated file record with preview image
    const file = api.addFile({
      name: `image-${fileCounter}.jpg`,
      status: 'ready',
      size: Math.floor(Math.random() * 1000000),
      url: sampleImages[(fileCounter - 1) % sampleImages.length]
    })
    fileCounter++

    if (!file) {
      console.log('Max count reached or error adding file')
    }
  })

  simulateBtn.addEventListener('click', function() {
    const api = upload.hakumiComponent?.api
    if (!api) return

    const fileList = api.getFileList()
    const readyFiles = fileList.filter(f => f.status === 'ready')

    if (readyFiles.length === 0) {
      // Add a file first if none ready
      const file = api.addFile({
        name: `upload-${fileCounter}.jpg`,
        status: 'ready',
        url: sampleImages[(fileCounter - 1) % sampleImages.length]
      })
      fileCounter++
      if (file) {
        api.simulateUpload(file.uid, { duration: 2000, success: true })
      }
    } else {
      // Simulate upload for first ready file
      api.simulateUpload(readyFiles[0].uid, { duration: 2000, success: true })
    }
  })

  errorBtn.addEventListener('click', function() {
    const api = upload.hakumiComponent?.api
    if (!api) return

    // Add a file and simulate failed upload
    const file = api.addFile({
      name: `failed-upload-${fileCounter}.jpg`,
      status: 'ready',
      url: sampleImages[(fileCounter - 1) % sampleImages.length]
    })
    fileCounter++

    if (file) {
      api.simulateUpload(file.uid, {
        duration: 1500,
        success: false,
        error: 'Server rejected the file'
      })
    }
  })

  // Listen to events
  upload.addEventListener('hakumi:upload:success', function(e) {
    console.log('Upload success:', e.detail.file?.name)
  })

  upload.addEventListener('hakumi:upload:error', function(e) {
    console.log('Upload error:', e.detail.file?.name, e.detail.error)
  })
})
</script>