import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";

import { styled } from "../../theme";
import { pxToRem } from "../../utils/pxToRem";
import { Flex } from "../flex";
import { Text } from "../text";

export const Root = styled(RadixNavigationMenu.Root, {
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  width: "100%",
  height: pxToRem(32),
});

export const CrumbsList = styled(RadixNavigationMenu.List, {
  display: "flex",
  alignItems: "center",
  gap: "$2",
});

export const OverflowCrumbsTrigger = styled(RadixNavigationMenu.Trigger);

export const OverflowContent = styled(RadixNavigationMenu.Content, {
  position: "absolute",
  top: "$8",
  backgroundColor: "$off-white-3-opaque",
  borderRadius: "$s",
  py: "$2",
});

export const SubCrumbLink = styled(RadixNavigationMenu.Link, {
  display: "block",
  py: "$2",
  px: "$3",
  "&:focus": {
    backgroundColor: "$off-white-9",
  },
});

export const Crumb = styled(Flex, {
  gap: "$2",
  alignItems: "center",
  width: "100%",

  "> svg": {
    flexShrink: 0,
  },

  variants: {
    iconEnd: {
      true: { flexDirection: "row-reverse", justifyContent: "space-between" },
    },
  },
});

export const StyledCrumbButton = styled("button", {
  width: "100%",
  cursor: "pointer",

  "&:hover": {
    bg: "$off-white-9",
  },
});

export const CrumbText = styled(Text, {
  color: "$off-white-72",
  whiteSpace: "nowrap",
  display: "block",
  variants: {
    isLast: {
      true: {
        fontWeight: "$bold",
        color: "$light-off-white",
      },
    },
  },
});

export const CrumbListItem = styled(RadixNavigationMenu.Item, {
  display: "flex",
  position: "relative",
  alignItems: "center",
  gap: "$2",
  flexShrink: 0,
  borderRadius: "$xs",

  "a:hover, &:focus-within": {
    bg: "$off-white-9",
    [`& ${CrumbText}`]: {
      color: "$light-off-white",
    },
    [`& ${Crumb}`]: {
      color: "$light-off-white",
    },
  },

  "&:first-child": {
    overflow: "hidden",
    flexShrink: 0,
    flexGrow: 1,
    flexBasis: "0px",
    maxWidth: "fit-content",
  },
  "&:last-child": {
    overflow: "hidden",
    flexShrink: 1,
    flexGrow: 0,
  },
});

export const RadixNavigationMenuLink = styled(RadixNavigationMenu.Link, {
  p: "$1",
  borderRadius: "$xs",

  [`& ${Crumb}`]: {
    color: "$off-white-72",
  },
});

export const SubCrumbList = styled("ul");
export const SubCrumbListItem = styled("li");