import React, { FC, useState } from 'react'
import classNames from 'classnames'
import { Container } from 'reactstrap'

import { NavMenu } from './NavMenu'
import { SideMenu } from './SideMenu'

import { ILayout } from '../interfaces'

import style from './scss/style.module.scss'

const AdminLayout: FC<ILayout> = ({ children = null }) => {

  const [sidebarIsOpen, setSidebar] = useState(true)
  const toggleSidebar = () => setSidebar(!sidebarIsOpen)

  return <>
    <NavMenu toggleSidebar={toggleSidebar} />
    <div className={style.wrapper}>
      <div className={classNames(`${style.sidebar}`, sidebarIsOpen ? `${style.isopen}` : '')}>
        <SideMenu />
      </div>
      <div className={classNames(`${style.content}`, sidebarIsOpen ? `${style.isopen}` : '') }>
        {children}
      </div>
    </div>
  </>
}

export {
  AdminLayout
}