import { useContext, useState } from 'react'
import Context from '../redux/context'
import { PRE_POPULATE_STORAGE } from '../redux/reducersTypes'
import EditForm from'./EditForm'

function Footer () {

  const [data] = useState([1,2,4,8,16,32,64])
  const [selected, setSelected] = useState(16)

  const [alert, setAlert] = useState({ hiddenClass: 'uk-hidden', value: '' } )

  const {dispatchStorage, route, show, setShow} = useContext(Context)

  const prePopulate = e => {
    const select = document.querySelector('footer select')
    dispatchStorage({ type: PRE_POPULATE_STORAGE, payload: select.value, route: route })
    setSelected(select.value = 16)
  }

  return (
    <footer className="uk-margin">
      <div className="uk-margin-large-top">
        <button className="uk-button uk-button-primary uk-text-bold uk-border-rounded uk-float-right" onClick={() => setShow(true)}>Create Note</button>
        <label htmlFor="pp" className="uk-text-bold">Use drop-list to select amount...</label>
          <select id="pp" className="uk-input uk-form-width-medium uk-margin-left uk-margin-right" defaultValue={selected} >
            { data.map((value, key) => <option key={key}>{value}</option>) }
          </select>
        <button className="uk-button uk-button-danger uk-text-bold uk-border-rounded" onClick={prePopulate}>Pre-populate</button>
      </div>
      <EditForm show={show} setShow={setShow} dispatch={dispatchStorage} route={route} alert={alert} setAlert={setAlert} />
    </footer>
  )
}

export default Footer