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

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

  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={e => handleExport(e, ids, notes)}
        />
        <p>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'>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, ids, setIds)}
            />
            <label htlmfor={note.noteId}>
              {note.title}
            </label><br/>
          </div>
        ))}
      </div>
    </section>
  )
}

export default Export