import * as TabsPrimitive from "@radix-ui/react-tabs";

import { styled, customScrollbars } from "../../theme";
import { pxToRem } from "../../utils";
import { Text } from "../text";

export const StyledTabs = styled(TabsPrimitive.Root, {});

export const StyledList = styled(TabsPrimitive.List, {
  display: "flex",
  borderBottom: "1px solid $off-white-9",
  whiteSpace: "nowrap",
  overflow: "auto",
  maxWidth: "100%",
  '&[data-show-scrollbars="true"]': customScrollbars,
  '&[data-show-scrollbars="false"]': {
    ...customScrollbars,
    "scrollbar-width": "none !important",
    "&::-webkit-scrollbar": {
      ...(customScrollbars["&::-webkit-scrollbar"] as Record<string, string>),
      display: "none",
      width: 0,
      height: 0,
    },
  },
});

export const StyledCount = styled(Text, { fontWeight: "$medium" });
export const StyledTabName = styled(Text, { color: "$off-white-72" });

export const StyledTrigger = styled(TabsPrimitive.Trigger, {
  all: "unset",
  display: "flex",
  cursor: "pointer",
  alignItems: "baseline",
  gap: "$1",
  textAlign: "center",
  fontSize: pxToRem(18),
  p: `${pxToRem(16)} ${pxToRem(32)}`,
  borderBottom: "2px solid transparent",
  [`& ${StyledCount}`]: { color: "$off-white-36" },
  '&[data-state="active"]': {
    borderBottom: "2px solid $light-off-white",
    [`& ${StyledCount}`]: { color: "$light-off-white" },
    [`& ${StyledTabName}`]: { color: "$light-off-white" },
  },
  "&:hover": {
    [`& ${StyledTabName}`]: { color: "$light-off-white" },
  },
  "-webkit-tap-highlight-color": "transparent",
});

export const StyledContent = styled(TabsPrimitive.Content, {});