import styles from '../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