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

const Import = ({setAction}) => {
  const [files, setFiles] = useState()
  const [done, setDone] = useState([])
  const {mutateNotes} = useNotes()

  return (
    <section className={styles.import}>
      <div className='window__submenu'>
        <div onClick={() => {setAction('')}}>Back</div>
      </div>
      <div className='window__scroll'>
        <form onSubmit={e => handleImport(e, files, mutateNotes, setDone)}>
          Import new notes:
          <div>
            <label className="window__button">
              Choose files
              <input
                name="import"
                type="file"
                multiple="multiple"
                accept="text/plain"
                onChange={e => handleChange(e, setFiles, setDone)}
              />
            </label>
          </div>
          {files && (
            <>
              <p>Notes to import:</p>
              <ul>
                {[...files].map((f, i) => <li style={color(done[i])} key={f.name}>{f.name} {state(done[i])}</li>)}
              </ul>
              {
                done.length === 0
                  ? <input type="submit" value="Import" className="window__button" />
                  : <p>Import finished.<br/><br/>Go back to notes list or choose other notes to import.</p>
              }
            </>
          )}
        </form>
      </div>
    </section>
  )
}

export default Import