import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { styled, keyframes } from "../../theme";
import { Box } from "../box";

const slideDown = keyframes({
  from: { height: 0 },
  to: { height: "var(--radix-accordion-content-height)" },
});

const slideUp = keyframes({
  from: { height: "var(--radix-accordion-content-height)" },
  to: { height: 0 },
});

export const StyledRoot = styled(AccordionPrimitive.Root, {
  width: "100%",
});

export const StyledItem = styled(AccordionPrimitive.Item, {
  overflow: "hidden",
  mt: "1px",

  "&:first-child": {
    mt: 0,
  },
  "&:focus-within": {
    position: "relative",
    zIndex: 1,
  },
});

export const StyledHeader = styled(AccordionPrimitive.Header, {
  all: "unset",
  display: "flex",

  "&:hover": {
    bg: "$black3",
  },
});

export const Indicator = styled(Box, {});
export const IconPlus = styled(Box, {});
export const IconMinus = styled(Box, {
  transform: "rotate(-90deg)",
  marginTop: "-100%",
  transition: "150ms all ease-out",
  width: "$3",
  height: "$3",
});

export const StyledTrigger = styled(AccordionPrimitive.Trigger, {
  fontFamily: "inherit",
  backgroundColor: "transparent",
  minHeight: "$6",
  flex: 1,
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
  cursor: "pointer",

  '&[data-state="open"]': {
    [`& ${IconMinus}`]: {
      transform: "rotate(0deg)",
    },
  },
});

export const StyledContent = styled(AccordionPrimitive.Content, {
  overflow: "hidden",

  '&[data-state="open"]': {
    display: "block",
    animation: `${slideDown} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,
  },
  '&[data-state="closed"]': {
    animation: `${slideUp} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,
  },
  "&[hidden]": {
    display: "none !important",
  },
});