import React, {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)
  }, [])

  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;