import React, {useState, useEffect, useRef} from 'react'
import useUser from 'lib/useUser'
import fetchJson from 'lib/fetchJson'
import {close, toggleMin, toggleMax, move} from 'helpers/windowActions'
import {Layout} from 'components'

const App = ({children, app, apps, setApps}) => {
  const winRef = useRef(null);
  const [errorMsg, setErrorMsg] = useState('')

  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]} : {}}
      >
        <div className='window__title'>Notes</div>
        <div className='window__title-buttons'>
          <span onClick={() => toggleMin('Notes', apps, setApps)}>_</span>
          <span onClick={() => toggleMax('Notes', apps, setApps)}>+</span>
          <span onClick={() => close('Notes', apps, setApps)}>x</span>
        </div>
        <div className='window__content'>{children}</div>
      </div>
    </>
  )
}

export default App;