import React, {useEffect, useRef} from 'react'
import {close, toggleMin, toggleMax, move} from 'helpers/windowActions'
import {faArrowUp, faExpandAlt, faTimes, faCompressAlt} from '@fortawesome/free-solid-svg-icons'
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'

const App = ({children, app, apps, setApps}) => {
  const winRef = useRef(null);

  useEffect(() => {
    move(app.name, winRef, apps, setApps)
  }, [])

  return (
    <>
      <div
        ref={winRef}
        className={
          'list window'
          + (app.min ? ' hidden' : '')
          + (app.max ? ' maximized' : '')
        }
        style={app.pos.length ? {top: app.pos[1], left: app.pos[0]} : {}}
        tabIndex={0}
      >
        <h2 className='window__title'>Notes</h2>
        <div className='window__title-buttons'>
          <span onClick={() => toggleMin('Notes', apps, setApps)}>
            <FontAwesomeIcon icon={faArrowUp} />
          </span>
          <span onClick={() => toggleMax('Notes', apps, setApps)}>
            <FontAwesomeIcon icon={app.max ? faCompressAlt : faExpandAlt} />
          </span>
          <span onClick={() => close('Notes', apps, setApps)}>
            <FontAwesomeIcon icon={faTimes} />
          </span>
        </div>
        <div className='window__content'>{children}</div>
      </div>
    </>
  )
}

export default App;