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, setApps}) => {
  const winRef = useRef(null);

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

  return (
    <>
      <div
        ref={winRef}
        className={
          'window'
          + (app.min ? ' hidden' : '')
          + (app.max ? ' maximized' : '')
        }
        style={{
          maxHeight: app.height,
          maxWidth: 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'>{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') && (
            <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;