import styles from '../styles/Notes.module.scss'
import React, { useState } from 'react'
import useSettings from 'hooks/useSettings'
import useNotes from '../hooks/useNotes'
import { handleSelect, handleSelectAll, handleExport } from '../helpers/export'

const Export = ({ setAction }) => {
  const { notes } = useNotes()
  const { t } = useSettings()
  const [ids, setIds] = useState(notes.map(n => n.noteId))
  const sortFn = (a, b) => new Date(b.updated_at) - new Date(a.updated_at)

  if (!notes) return null

  return (
    <section>
      <div className='window__submenu'>
        <div>
          <div onClick={() => { setAction('') }}>{t('back')}</div>
        </div>
      </div>
      <div className={`window__scroll ${styles.export}`}>
        <h3>{t('notes_click_to_export')}</h3>
        <input
          className='window__button'
          type='submit'
          value={t('export')}
          onClick={e => handleExport(e, ids, notes)}
        />
        <p>{t('notes_to_export')}</p>
        <div className={styles.export__select}>
          <input
            type='checkbox'
            name='selectAll'
            onChange={e => handleSelectAll(e, notes, setIds)}
            checked={notes.length === ids.length}
          />
          <label htmlFor='selectAll'>{t('select_all')}</label>
        </div>
        <ul>
          {notes.sort(sortFn).map(note => (
            <li key={note.noteId}>
              <input
                type='checkbox'
                name={note.noteId}
                value={note.noteId}
                checked={ids.includes(note.noteId)}
                onChange={() => handleSelect(note.noteId, ids, setIds)}
              />
              <label htlmfor={note.noteId}>
                {note.title}
              </label><br />
            </li>
          ))}
        </ul>
      </div>
    </section>
  )
}

export default Export