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

const App = ({ children, app, setApps }) => {
  const { t } = useSettings()
  const winRef = useRef(null)
  const forceMax = useMediaQuery(`(max-width: ${app.width}), (max-height: ${app.height})`)

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

  return (
    <div
      ref={winRef}
      onClick={() => { focus(app.name, setApps) }}
      className={
        'window' +
        (app.min ? ' hidden' : '') +
        (app.max || forceMax ? ' maximized' : '')
      }
      style={{
        height: app.height,
        width: app.width,
        ...app.pos.length
          ? { top: app.pos[1], left: app.pos[0] }
          : {
              top: `calc((( 100vh - ${app.height} ) / 2) + 2em)`,
              left: `calc(( 100vw - ${app.width} ) / 2)`
            }
      }}
    >
      <h2 className='window__title'>{t(app.name)}</h2>
      <div className='window__content'>{children}</div>
      <div className='window__title-buttons'>
        {app.buttons.includes('min') && (
          <span onClick={() => toggleMin(app.name, setApps)}>
            <FontAwesomeIcon icon={faArrowUp} />
          </span>
        )}
        {app.buttons.includes('max') && !forceMax && (
          <span onClick={() => toggleMax(app.name, setApps)}>
            <FontAwesomeIcon icon={app.max ? faCompressAlt : faExpandAlt} />
          </span>
        )}
        {app.buttons.includes('close') && (
          <span onClick={() => close(app.name, setApps)}>
            <FontAwesomeIcon icon={faTimes} />
          </span>
        )}
      </div>
    </div>
  )
}

export default App