import styles from "./App.module.scss";
import {
  Button,
  ChakraProvider,
  Input,
  InputGroup,
  InputRightElement,
  Menu,
  MenuButton,
  MenuItem,
  Image,
  MenuList,
  CloseButton,
} from "@chakra-ui/react";
import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
import { Mosaic, MosaicWindow, RemoveButton } from "react-mosaic-component";
import classNames from "classnames";

import "react-mosaic-component/react-mosaic-component.css";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/icons/lib/css/blueprint-icons.css";

function App() {
  const ELEMENT_MAP: { [viewId: string]: JSX.Element } = {
    a: <div>Left Window</div>,
    b: <div>Top Right Window</div>,
    c: <div>Bottom Right Window</div>,
  };

  return (
    <ChakraProvider>
      <main className={styles.main}>
        <nav className={styles.nav}>
          <h1 className={styles.title}>panorama</h1>

          <Menu>
            <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
              <AddIcon />
            </MenuButton>

            <MenuList zIndex={500}>
              <MenuItem minH="48px">
                <Image
                  boxSize="2rem"
                  borderRadius="full"
                  src="https://placekitten.com/100/100"
                  alt="Fluffybuns the destroyer"
                  mr="12px"
                />
                <span>Fluffybuns the Destroyer</span>
              </MenuItem>

              <MenuItem minH="40px">
                <Image
                  boxSize="2rem"
                  borderRadius="full"
                  src="https://placekitten.com/120/120"
                  alt="Simon the pensive"
                  mr="12px"
                />
                <span>Simon the pensive</span>
              </MenuItem>
            </MenuList>
          </Menu>

          <div className={styles.spacer} />

          <InputGroup className={styles.searchContainer}>
            <Input placeholder="Search..." />
            <InputRightElement>
              <SearchIcon />
            </InputRightElement>
          </InputGroup>
        </nav>

        <Mosaic<string>
          className={classNames(styles.container, "mosaic-blueprint-theme")}
          renderTile={(id, path) => (
            <MosaicWindow title={id} path={path}></MosaicWindow>
          )}
          blueprintNamespace="bp3"
          initialValue={{
            direction: "row",
            first: "Journal",
            second: {
              direction: "row",
              first: {
                direction: "column",
                first: "Calendar",
                second: "Email",
              },
              second: "Chat",
              splitPercentage: 66.66,
            },
            splitPercentage: 25,
          }}
        />
      </main>
    </ChakraProvider>
  );
}

export default App;
