import { Global, css } from "@emotion/react";
import Header from './Header/Header.jsx';
import Sidebar from './Sidebar/Sidebar.jsx';
import Canvas from './Canvas/Canvas.jsx';
import { Grid, GridItem, useRecipe } from '@chakra-ui/react';
import { useState } from 'react';

export default function Dashboard() {
  const recipe = useRecipe({ key: "canvas" });
  const styles = recipe();

  // Lifted State - defaults to widget dashboard
  const [view, setView] = useState("widget");

  return (
    <>
      <Global // change the background color of widget shadow when moving
        styles={css`
          .react-grid-placeholder {
            background: #c0d2e3ff !important;
            border-color: #a9b6c2ff !important;
            box-shadow: 0 0 10px #c0d2e3ff !important;
            opacity: 1 !important;
            border-radius: 5px;
          }

          .react-resizable-handle-se {
            position: absolute;
            bottom: 0;
            z-index: 1;
            border-radius: 5px;
          }

          * {
            scrollbar-width: thin;              /* Firefox */
            scrollbar-color: #a0aec0 transparent; /* Firefox */
          }

          /* Chrome, Edge, Safari */
          ::-webkit-scrollbar {
            width: 8px;
          }
          ::-webkit-scrollbar-thumb {
            background-color: rgba(100, 100, 100, 0.4);
            border-radius: 4px;
          }
          ::-webkit-scrollbar-track {
            background: transparent;
          }
        `}
      />
      <Grid css={styles}
        templateRows="1fr 11fr"
        templateColumns="1fr 20fr"
        height="100vh"
        width="100vw"
      >
        <GridItem rowSpan={1} colSpan={2}>
          <Header />
        </GridItem>
        <GridItem colSpan={1}>
          <Sidebar onChangeView={ setView }/>
        </GridItem>
        <GridItem colSpan={1} width="100%">
          <Canvas view={ view }/>
        </GridItem> 
      </Grid>
    </>
  );
}