import styles from "./SidebarHeader.module.css";
import Icon from "@/src/components/Icon/Icon";
import { DropdownMenu } from "@kobalte/core/dropdown-menu";
import { useNavigate } from "@solidjs/router";
import { Typography } from "../Typography/Typography";
import { createSignal, For, Show, Suspense } from "solid-js";
import { navigateToOnboarding } from "@/src/hooks/clan";
import { setActiveClanURI } from "@/src/stores/clan";
import { Button } from "../Button/Button";
import { ClanSettingsModal } from "@/src/modals/ClanSettingsModal/ClanSettingsModal";
import { useClanContext } from "@/src/routes/Clan/Clan";

export const SidebarHeader = () => {
  const navigate = useNavigate();

  const [open, setOpen] = createSignal(false);
  const [showSettings, setShowSettings] = createSignal(false);

  // get information about the current active clan
  const ctx = useClanContext();

  const clanChar = () =>
    ctx?.activeClanQuery?.data?.details.name.charAt(0).toUpperCase();
  const clanName = () => ctx?.activeClanQuery?.data?.details.name;

  const clanList = () =>
    ctx.allClansQueries
      .filter((it) => it.isSuccess)
      .map((it) => it.data!)
      .sort((a, b) => a.details.name.localeCompare(b.details.name));

  return (
    <div class={styles.sidebarHeader}>
      <Show when={ctx.activeClanQuery.isSuccess && showSettings()}>
        <ClanSettingsModal
          model={ctx.activeClanQuery.data!}
          onClose={() => {
            ctx?.activeClanQuery?.refetch(); // refresh clan data
            setShowSettings(false);
          }}
        />
      </Show>
      <Suspense fallback={"Loading..."}>
        <DropdownMenu open={open()} onOpenChange={setOpen} sameWidth={true}>
          <DropdownMenu.Trigger class={styles.dropDownTrigger}>
            <div class={styles.clanLabel}>
              <div class={styles.clanIcon}>
                <Typography
                  hierarchy="label"
                  size="s"
                  weight="bold"
                  inverted={true}
                >
                  {clanChar()}
                </Typography>
              </div>
              <Typography
                hierarchy="label"
                size="s"
                weight="bold"
                inverted={!open()}
              >
                {clanName()}
              </Typography>
            </div>
            <DropdownMenu.Icon>
              <Icon icon={"CaretDown"} inverted={!open()} size="0.75rem" />
            </DropdownMenu.Icon>
          </DropdownMenu.Trigger>
          <DropdownMenu.Portal>
            <DropdownMenu.Content class={styles.dropDownContent}>
              <DropdownMenu.Item
                class={styles.dropdownItem}
                onSelect={() => setShowSettings(true)}
              >
                <Icon
                  icon="Settings"
                  size="0.75rem"
                  inverted={true}
                  color="tertiary"
                />
                <Typography hierarchy="label" size="xs" weight="medium">
                  Settings
                </Typography>
              </DropdownMenu.Item>
              <DropdownMenu.Group class={styles.dropdownGroup}>
                <DropdownMenu.GroupLabel class={styles.dropdownGroupLabel}>
                  <Typography
                    hierarchy="label"
                    family="mono"
                    size="xs"
                    color="tertiary"
                    transform="uppercase"
                  >
                    Your Clans
                  </Typography>
                  <Button
                    hierarchy="secondary"
                    ghost
                    size="xs"
                    icon="Plus"
                    onClick={() => navigateToOnboarding(navigate, true)}
                  >
                    Add
                  </Button>
                </DropdownMenu.GroupLabel>
                <div class={styles.dropdownGroupItems}>
                  <For each={clanList()}>
                    {(clan) => (
                      <Suspense fallback={"Loading..."}>
                        <DropdownMenu.Item
                          class={styles.dropdownItem}
                          onSelect={() => {
                            setActiveClanURI(clan.uri);
                          }}
                        >
                          <Typography
                            hierarchy="label"
                            size="xs"
                            weight="medium"
                          >
                            {clan.details.name}
                          </Typography>
                        </DropdownMenu.Item>
                      </Suspense>
                    )}
                  </For>
                </div>
              </DropdownMenu.Group>
            </DropdownMenu.Content>
          </DropdownMenu.Portal>
        </DropdownMenu>
      </Suspense>
    </div>
  );
};
