import { useState } from "react";
import {
  BiBook,
  BiBrain,
  BiBulb,
  BiCreditCard,
  BiData,
  BiError,
  BiHeart,
  BiHistory,
  BiHome,
  BiKey,
  BiLineChart,
  BiLogOut,
  BiRightArrowAlt,
  BiUser,
  BiWrench
} from "react-icons/bi";
import {
  VuiAppSideNav,
  VuiAppSideNavLink,
  OptionListItem,
  VuiAccountButton,
  VuiCopyButton,
  VuiFlexContainer,
  VuiFlexItem,
  VuiIcon,
  VuiPopover,
  VuiText,
  VuiSpacer,
  VuiSearchInput,
  VuiLink,
  VuiButtonPrimary,
  VuiAppSideNavGroup,
  VuiIconButton
} from "../../../lib";

const AccountButton = () => {
  const options: OptionListItem<string>[] = [
    {
      value: "edit",
      label: "Manage account",
      color: "primary",
      testId: "profileOption",
      icon: (
        <VuiIcon>
          <BiUser />
        </VuiIcon>
      )
    },
    {
      value: "signOut",
      label: "Sign out",
      color: "primary",
      testId: "signOutOption",
      icon: (
        <VuiIcon>
          <BiLogOut />
        </VuiIcon>
      )
    }
  ];

  const info: { title: string; value: React.ReactNode }[] = [
    {
      title: "Customer ID",
      value: (
        <VuiFlexContainer spacing="xs" alignItems="center">
          <VuiFlexItem grow={false}>6327476328432</VuiFlexItem>

          <VuiFlexItem>
            <VuiCopyButton size="xs" value="6327476328432" />
          </VuiFlexItem>
        </VuiFlexContainer>
      )
    }
  ];

  return <VuiAccountButton userName="Falcor" email="falcor@neverendingstory.com" options={options} info={info} />;
};

export const Layout = ({ children }: { children: React.ReactNode }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [activeItem, setActiveItem] = useState<
    "home" | "corpora" | "agents" | "tools" | "llms" | "apiKeys" | "team" | "usage" | "billing" | "health" | "docs"
  >("home");

  const navContent = (
    <>
      <VuiFlexContainer spacing="xs" alignItems="center">
        <VuiFlexItem grow={1} shrink={0}>
          <VuiAppSideNavLink
            name="Home"
            iconBefore={<BiHome />}
            data-testid="navHome"
            onClick={() => setActiveItem("home")}
            isSelected={activeItem === "home"}
          />
        </VuiFlexItem>

        <VuiFlexItem grow={0} shrink={0}>
          <VuiIconButton
            color="neutral"
            aria-label="Recent items"
            tooltip={{
              position: "right"
            }}
            icon={
              <VuiIcon>
                <BiHistory />
              </VuiIcon>
            }
          />
        </VuiFlexItem>
      </VuiFlexContainer>

      <VuiSpacer size="l" />

      <VuiAppSideNavGroup title="Build">
        <VuiAppSideNavLink
          name="Agents"
          iconBefore={<BiBrain />}
          data-testid="navAgents"
          onClick={() => setActiveItem("agents")}
          isSelected={activeItem === "agents"}
        />

        <VuiAppSideNavLink
          name="Corpora"
          iconBefore={<BiData />}
          data-testid="navCorpora"
          onClick={() => setActiveItem("corpora")}
          isSelected={activeItem === "corpora"}
        />

        <VuiAppSideNavLink
          name="Tools"
          iconBefore={<BiWrench />}
          data-testid="navTools"
          onClick={() => setActiveItem("tools")}
          isSelected={activeItem === "tools"}
        />

        <VuiAppSideNavLink
          name="LLMs"
          iconBefore={<BiBulb />}
          data-testid="navLlms"
          onClick={() => setActiveItem("llms")}
          isSelected={activeItem === "llms"}
        />
      </VuiAppSideNavGroup>

      <VuiSpacer size="l" />

      <VuiAppSideNavGroup title="Collaborate">
        <VuiAppSideNavLink
          name="API keys"
          iconBefore={<BiKey />}
          data-testid="navApiKeys"
          onClick={() => setActiveItem("apiKeys")}
          isSelected={activeItem === "apiKeys"}
        />

        <VuiAppSideNavLink
          name="Team"
          iconBefore={<BiUser />}
          data-testid="navTeam"
          onClick={() => setActiveItem("team")}
          isSelected={activeItem === "team"}
        />
      </VuiAppSideNavGroup>

      <VuiSpacer size="l" />

      <VuiAppSideNavGroup title="Manage">
        <VuiAppSideNavLink
          name="Usage"
          iconBefore={<BiLineChart />}
          data-testid="navUsage"
          onClick={() => setActiveItem("usage")}
          isSelected={activeItem === "usage"}
        />

        <VuiAppSideNavLink
          name="Billing"
          iconBefore={<BiCreditCard />}
          data-testid="navBilling"
          onClick={() => setActiveItem("billing")}
          isSelected={activeItem === "billing"}
        />

        <VuiAppSideNavLink
          name="Health"
          iconBefore={<BiHeart />}
          data-testid="navHealth"
          iconAfterAlignEnd
          iconAfter={<BiError />}
          onClick={() => setActiveItem("health")}
          isSelected={activeItem === "health"}
        />

        <VuiPopover
          anchorSide="rightUp"
          isOpen={isOpen}
          setIsOpen={() => setIsOpen(!isOpen)}
          padding={true}
          header="Documentation"
          button={
            <VuiAppSideNavLink
              name="Docs"
              iconBefore={<BiBook />}
              data-testid="navDocs"
              onClick={() => setActiveItem("docs")}
              isSelected={activeItem === "docs"}
            />
          }
        >
          <div style={{ width: "280px" }}>
            <VuiSearchInput size="m" placeholder="Search docs" />
            <VuiSpacer size="s" />
            <VuiFlexContainer alignItems="center" spacing="l" justifyContent="start">
              <VuiText size="m">
                <VuiLink href="https://docs.vectara.com/docs/rest-api" target="_blank">
                  <VuiFlexContainer alignItems="center" spacing="xxs" justifyContent="start">
                    <VuiFlexItem>API reference</VuiFlexItem>
                    <VuiFlexItem>
                      <VuiIcon size="s">
                        <BiRightArrowAlt />
                      </VuiIcon>
                    </VuiFlexItem>
                  </VuiFlexContainer>
                </VuiLink>
              </VuiText>

              <VuiText size="m">
                <VuiLink href="https://docs.vectara.com" target="_blank">
                  <VuiFlexContainer alignItems="center" spacing="xxs" justifyContent="start">
                    <VuiFlexItem>Docs</VuiFlexItem>
                    <VuiFlexItem>
                      <VuiIcon size="s">
                        <BiRightArrowAlt />
                      </VuiIcon>
                    </VuiFlexItem>
                  </VuiFlexContainer>
                </VuiLink>
              </VuiText>
            </VuiFlexContainer>
          </div>
        </VuiPopover>
      </VuiAppSideNavGroup>
    </>
  );

  return (
    <>
      <div className="appExampleNav">
        <VuiAppSideNav size="l" canCollapseSelf={false} content={navContent} />

        <div className="appExampleNav__bottom">
          <VuiButtonPrimary color="success" size="m" fullWidth>
            Trial ends in 3 days
          </VuiButtonPrimary>

          <VuiSpacer size="s" />

          <AccountButton />
        </div>
      </div>
      <div className="appExampleLayout">{children}</div>
    </>
  );
};