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

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

  return (
    <section className={styles.import}>
      <div className='window__submenu'>
        <div onClick={() => { setAction('') }}>{t('back')}</div>
      </div>
      <div className='window__scroll'>
        <form onSubmit={e => handleImport(e, files, mutateNotes, setDone)}>
          {t('notes_import')}
          <div>
            <label className='window__button'>
              {t('choose_files')}
              <input
                name='import'
                type='file'
                multiple='multiple'
                accept='text/plain'
                onChange={e => handleChange(e, setFiles, setDone)}
              />
            </label>
          </div>
          {files && (
            <>
              <p>{t('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={t('import')} className='window__button' />
                  : <p>{t('import_finished')}<br /><br />{t('notes_import_go_back')}</p>
              }
            </>
          )}
        </form>
      </div>
    </section>
  )
}

export default Import