import React, { FunctionComponent, useContext, useMemo } from "react";
import { Container, Image, ListGroup } from "react-bootstrap";
import { useReduxStore } from "../@redux/hooks/base";
import { useIsRadarrEnabled, useIsSonarrEnabled } from "../@redux/hooks/site";
import logo from "../@static/logo64.png";
import { SidebarToggleContext } from "../App";
import { useGotoHomepage } from "../utilites/hooks";
import {
  BadgesContext,
  CollapseItem,
  HiddenKeysContext,
  LinkItem,
} from "./items";
import { RadarrDisabledKey, SidebarList, SonarrDisabledKey } from "./list";
import "./style.scss";
import { BadgeProvider } from "./types";

interface Props {
  open?: boolean;
}

const Sidebar: FunctionComponent<Props> = ({ open }) => {
  const toggle = useContext(SidebarToggleContext);

  const { movies, episodes, providers, status } = useReduxStore(
    (s) => s.site.badges
  );

  const sonarrEnabled = useIsSonarrEnabled();
  const radarrEnabled = useIsRadarrEnabled();

  const badges = useMemo<BadgeProvider>(
    () => ({
      Wanted: {
        Series: sonarrEnabled ? episodes : 0,
        Movies: radarrEnabled ? movies : 0,
      },
      System: {
        Providers: providers,
        Status: status,
      },
    }),
    [movies, episodes, providers, sonarrEnabled, radarrEnabled, status]
  );

  const hiddenKeys = useMemo<string[]>(() => {
    const list = [];
    if (!sonarrEnabled) {
      list.push(SonarrDisabledKey);
    }
    if (!radarrEnabled) {
      list.push(RadarrDisabledKey);
    }
    return list;
  }, [sonarrEnabled, radarrEnabled]);

  const cls = ["sidebar-container"];
  const overlay = ["sidebar-overlay"];

  if (open === true) {
    cls.push("open");
    overlay.push("open");
  }

  const sidebarItems = useMemo(
    () =>
      SidebarList.map((v) => {
        if (hiddenKeys.includes(v.hiddenKey ?? "")) {
          return null;
        }
        if ("children" in v) {
          return <CollapseItem key={v.name} {...v}></CollapseItem>;
        } else {
          return <LinkItem key={v.link} {...v}></LinkItem>;
        }
      }),
    [hiddenKeys]
  );

  const goHome = useGotoHomepage();

  return (
    <React.Fragment>
      <aside className={cls.join(" ")}>
        <Container className="sidebar-title d-flex align-items-center d-md-none">
          <Image
            alt="brand"
            src={logo}
            width="32"
            height="32"
            onClick={goHome}
            className="cursor-pointer"
          ></Image>
        </Container>
        <HiddenKeysContext.Provider value={hiddenKeys}>
          <BadgesContext.Provider value={badges}>
            <ListGroup variant="flush">{sidebarItems}</ListGroup>
          </BadgesContext.Provider>
        </HiddenKeysContext.Provider>
      </aside>
      <div className={overlay.join(" ")} onClick={toggle}></div>
    </React.Fragment>
  );
};

export default Sidebar;