import styles from '../Notes.module.scss'
import React, {useState} from 'react'
import useNotes from '../hooks/useNotes'
import fetchJson from 'lib/fetchJson'
import JSZip from 'jszip'
import saveFile from 'helpers/saveFile'
import filename from '../helpers/fileName'
// import {state, color, handleImport, handleChange} from '../helpers/import'

const Export = ({setAction}) => {
  const {notes} = useNotes()
  const [ids, setIds] = useState(notes.map(n => n.noteId))
  // const [files, setFiles] = useState()
  // const [done, setDone] = useState([])

  const handleSelect = id => {
    ids.includes(id)
      ? setIds(ids.filter(i => i !== id))
      : setIds([...ids, id])
  }

  const handleSelectAll = e => {
    if (e.target.checked) {
      setIds(notes.map(n => n.noteId))
    } else {
      setIds([])
    }
  }

  const handleExport = e => {
    e.preventDefault()
    const zip = new JSZip()

    Promise.all(ids.map(async id => {
      const title = notes.find(n => n.noteId === id).title
      const {content} = await fetchJson(`/api/note/${id}`)
      zip.folder('notes').file(filename(title), content, {binary: true})
    })).then(() => {
      zip.generateAsync({type:"blob"})
        .then(c => saveFile(c, 'notes.zip', 'application/zip'))
    })
  }

  if (!notes) return null

  return (
    <section>
      <div className='window__submenu'>
        <div onClick={() => {setAction('')}}>Back</div>
      </div>
      <div className={`window__scroll ${styles.export}`}>
        <h3>Click to export your notes:</h3>
        <input
          className="window__button"
          type="submit"
          value="Export"
          onClick={handleExport}
        />
        <p>Notes to export:</p>
        <div className={`${styles.export__select}`}>
          <input type="checkbox" name='selectAll' onChange={handleSelectAll} checked={notes.length === ids.length} />
          <label htmlFor='selectAll'>Select all</label>
        </div>
        {notes.map(note => (
          <div key={note.noteId}>
            <input
              type="checkbox"
              name={note.noteId}
              value={note.noteId}
              checked={ids.includes(note.noteId)}
              onChange={() => handleSelect(note.noteId)}
            />
            <label htlmfor={note.noteId}>
              {note.title}
            </label><br/>
          </div>
        ))}
      </div>
    </section>
  )
}

export default Export