/** @jsxRuntime classic */
/** @jsx jsx */
import { css, jsx, useTheme } from '@emotion/react';
import React, { useEffect, useState } from 'react';
import { Navigation } from '../../Navigation';
import { Notification } from './notification';

import { Cart } from './cart';
import { IColors } from '../../../types/theme';
import { Calendar } from '../index';
import { LeftWindow } from './leftWindow';
import { ECalendarMode, ECalendarView } from '../../../SACalendar/types';

const containerCss = (colors: IColors) => css`
  width: 100%;
  height: 100%;
  position: relative;
  background: ${colors.bg_background_fields};
  display: flex;
  overflow-x: hidden;
  border: 1px solid;
`;

const main = (colors: IColors) => css`
  background: ${colors.bg_background_primary};
  flex-grow: 1;
  position: relative;
  overflow: hidden;
`;

export const MainLayoutWeekly = ({
  api,
  dnd,
  scrollTo,
}: {
  api?: boolean;
  dnd?: boolean;
  scrollTo?: boolean;
}) => {
  const [state, setState] = useState('calendar');
  const [isNavigation, setNavigation] = useState(false);
  const [isCart, setCart] = useState(false);
  const [isRightWindow, setRightWindow] = useState(false);
  const [isLeftWindow, setLeftWindow] = useState(false);
  const [showCart, setShowCart] = useState(false);
  const [widthChangeTrigger, setWidthChangeTrigger] = useState<boolean>(false);

  useEffect(() => {
    setWidthChangeTrigger(!widthChangeTrigger);
  }, [isNavigation, isCart, isRightWindow, isLeftWindow, showCart]);

  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if ((e.target as HTMLElement).tagName === 'BODY') {
        if (e.code === 'KeyC') {
          cartToggle(!isCart);
        }
        if (e.code === 'KeyN') {
          navigationToggle(!isNavigation);
        }
      }
    };
    window.addEventListener('keydown', handler);

    return () => window.removeEventListener('keydown', handler);
  }, [isCart, isNavigation]);

  const cartToggle = (val: boolean) => {
    if (val && isLeftWindow) {
      setLeftWindow(false);
      // setCart(true);
    }
    setCart(val);
  };

  const navigationToggle = (val: boolean) => {
    // if (val && isCart) {
    //   setCart(false);
    //   setNavigation(true);
    // }
    setNavigation(val);
  };

  const leftWindowToggle = (val: boolean) => {
    if (val && isCart) {
      setCart(false);
      // setNavigation(true);
    }
    setLeftWindow(val);
  };
  const rightWindowToggle = (val: boolean) => {
    setRightWindow(val);
  };

  const handleShowCart = () => {
    setShowCart(!showCart);
  };

  const colors = useTheme();

  const render = () => {
    switch (state) {
      case 'calendar':
        return (
          <Calendar
            isRightWindow={isRightWindow}
            setRightWindow={rightWindowToggle}
            isLeftWindow={isLeftWindow}
            setLeftWindow={leftWindowToggle}
            widthChangeTrigger={widthChangeTrigger}
            api={api}
            dnd={dnd}
            scrollTo={scrollTo}
          />
        );
      default:
        return state;
    }
  };

  return (
    <div css={containerCss(colors)}>
      <Navigation
        handleCart={handleShowCart}
        setActive={setState}
        active={state}
        isWide={isNavigation}
        setWide={navigationToggle}
        user={{
          img: 'https://thispersondoesnotexist.com/image',
          fullname: 'jenny wilson',
        }}
      />
      <div style={{ display: 'flex', flexGrow: 1 }}>
        <LeftWindow isLeftWindow={isLeftWindow} setLeftWindow={setLeftWindow} />
        <div css={main(colors)}>
          {render()}
          {/* <Notification /> */}
        </div>
      </div>
      {showCart && <Cart isCart={isCart} setCart={cartToggle} />}
    </div>
  );
};