import View from '@/views/Views'
import SidePanel from '@/components/template/SidePanel'
import { useStoreState, useStoreActions } from '@/store'
import { FaCog } from 'react-icons/fa';
import classNames from 'classnames'

const ConfiguratorToggle = () => {
  const { setPanelExpand } = useStoreActions((actions) => actions.theme)
  const themeColor = useStoreState((state) => state.theme.themeColor)
  const primaryColorLevel = useStoreState((state) => state.theme.primaryColorLevel)

  return (
    <div
      className={classNames(
        'fixed ltr:right-0 rtl:left-0 top-96 p-3 ltr:rounded-tl-md ltr:rounded-bl-md rtl:rounded-tr-md rtl:rounded-br-md text-white text-xl cursor-pointer select-none',
        `bg-${themeColor}-${primaryColorLevel}`,
      )}
      onClick={() => {
        setPanelExpand(true)
      }}
    >
      <FaCog />
    </div>
  )
}

const BlankLayout = () => {
  return (
    <div className="app-layout-blank flex flex-auto flex-col h-[100vh]">
      <View />
      <ConfiguratorToggle />
      <SidePanel className="hidden" />
    </div>
  )
}

export default BlankLayout