import { useRef } from 'react'
import { useWaste } from '../store'

export function FolderPicker() {
  const { setSharedFiles, activeNetworkId, sharedFilesByNetwork } = useWaste()
  const inputRef = useRef<HTMLInputElement>(null)

  const current = activeNetworkId ? sharedFilesByNetwork[activeNetworkId] : undefined
  const label = current && current.size > 0
    ? `${current.size} file${current.size !== 1 ? 's' : ''} shared`
    : null

  function onChange(e: React.ChangeEvent<HTMLInputElement>) {
    const fileList = e.target.files
    if (!fileList || fileList.length === 0) return
    const map = new Map<string, File>()
    for (let i = 0; i < fileList.length; i++) {
      const f = fileList[i]
      map.set(f.name, f)
    }
    setSharedFiles(map)
    e.target.value = ''
  }

  return (
    <div className="folder-picker">
      <input
        ref={inputRef}
        type="file"
        // @ts-expect-error webkitdirectory is non-standard
        webkitdirectory=""
        multiple
        style={{ display: 'none' }}
        onChange={onChange}
      />
      <button
        className="folder-picker-btn"
        onClick={() => inputRef.current?.click()}
        title="Share a folder with peers on this network"
      >
        {label ?? '+ Share folder'}
      </button>
    </div>
  )
}