import { useRef, useState, type ReactElement } from 'react'
import { DeleteButton } from './buttons'
import { READ_TYPES, type Doc } from './docs'

// The paperclip beside the message box. Hovered, it opens a menu: Attach file picks files to add, and
// Added files opens the documents added so far, each deleted by two presses on its trash can. A press on the clip itself picks files too.

const CLOSE_MS = 250

export function Attach({
  docs,
  onFiles,
  onDelete,
}: {
  docs: Doc[]
  onFiles: (files: File[]) => void
  onDelete: (name: string) => void
}): ReactElement {
  const [open, setOpen] = useState(false)
  const [added, setAdded] = useState(false)
  const picker = useRef<HTMLInputElement>(null)
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)

  const hold = (): void => {
    if (timer.current) clearTimeout(timer.current)
    setOpen(true)
  }
  const release = (): void => {
    if (timer.current) clearTimeout(timer.current)
    timer.current = setTimeout(() => {
      setOpen(false)
      setAdded(false)
    }, CLOSE_MS)
  }
  const pick = (): void => {
    setOpen(false)
    picker.current?.click()
  }

  return (
    <div className="ag-attach" onMouseEnter={hold} onMouseLeave={release}>
      <button type="button" className="ag-icon" aria-label="Attach" title="Attach" onClick={pick}>
        <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
          <path
            d="M21 11.5 12.5 20a5 5 0 0 1-7.1-7.1l8.5-8.5a3.3 3.3 0 0 1 4.7 4.7l-8.5 8.5a1.7 1.7 0 0 1-2.4-2.4l7.8-7.8"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.8"
            strokeLinecap="square"
          />
        </svg>
      </button>
      {open && (
        <div className="ag-menu" role="menu">
          <button type="button" role="menuitem" className="ag-menu-item" onClick={pick}>
            Attach file
          </button>
          <div
            role="menuitem"
            aria-haspopup="menu"
            className="ag-menu-item ag-has-sub"
            onMouseEnter={() => setAdded(true)}
            onMouseLeave={() => setAdded(false)}
          >
            <span>Added files</span>
            <span className="ag-spacer" />
            <span className="ag-muted">{docs.length} ▸</span>
            {added && (
              <div className="ag-menu ag-submenu" role="menu">
                {docs.length === 0 && (
                  <div className="ag-menu-row ag-muted">None yet. Drop files on the view, or Attach file.</div>
                )}
                {docs.map((doc) => (
                  <div key={doc.id} className="ag-menu-row" title={doc.id}>
                    <span className="ag-line">{doc.name}</span>
                    <span className="ag-muted">{sizeOf(doc.size)}</span>
                    <DeleteButton label={`Delete ${doc.name}`} onDelete={() => onDelete(doc.id)} />
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      )}
      <input
        ref={picker}
        type="file"
        multiple
        hidden
        accept={READ_TYPES.map((t) => `.${t}`).join(',')}
        onChange={(e) => {
          const files = [...(e.target.files ?? [])]
          e.target.value = ''
          onFiles(files)
        }}
      />
    </div>
  )
}

function sizeOf(bytes: number): string {
  return bytes < 1024
    ? `${bytes} B`
    : bytes < 1024 * 1024
      ? `${Math.round(bytes / 1024)} KB`
      : `${(bytes / 1024 / 1024).toFixed(1)} MB`
}