import { customScrollbars, styled } from "../../theme";
import { pxToRem } from "../../utils";
import { Box } from "../box";
import { Flex } from "../flex";
import { Text } from "../text";
import { INDICATOR_WIDTH, STEP_X_PADDING, STEP_X_PADDING_SMALL } from "./constants";

export const transition: (cssProp: keyof CSSStyleDeclaration) => string = (cssProp) =>
  `${cssProp} 0.3s ease`;

export const StyledRoot = styled(Flex, {
  position: "relative",
  width: "100%",
  flexDirection: "column",
  overflowX: "auto",
  '&[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,
    },
  },
  "&::before": {
    top: `calc(${pxToRem(INDICATOR_WIDTH / 2)} - ${pxToRem(1)})`,
    content: "",
    position: "absolute",
    height: pxToRem(2),
    bg: "$off-white-36",
  },

  "&::after": {
    top: `calc(${pxToRem(INDICATOR_WIDTH / 2)} - ${pxToRem(1)})`,
    content: "",
    position: "absolute",
    height: pxToRem(2),
    bg: `linear-gradient(to right, #FFB0C2, #CC91F0)`,
  },

  variants: {
    animate: {
      true: {
        "&::after": {
          transition: transition("width"),
        },
      },
    },
  },
});

export const StyledStepsList = styled("ol", {
  display: "flex",
  width: "100%",
  mt: `calc(${pxToRem(INDICATOR_WIDTH)} + $2)`,
});

export const StyledStep = styled("li", {
  position: "relative",
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
  flex: 1,
  px: pxToRem(STEP_X_PADDING),
  "@s": {
    px: pxToRem(STEP_X_PADDING_SMALL),
  },
  "&:first-child": {
    paddingLeft: 0,
  },
  "&:last-child": {
    paddingRight: 0,
  },
});

export const StyledStepLabel = styled(Text, {
  color: "$off-white-36",
  transition: transition("color"),
  textAlign: "center",

  overflow: "hidden",
  "-webkit-line-clamp": 2,
  textOverflow: "ellipsis",
  display: "-webkit-box",
  "-webkit-box-orient": "vertical",

  variants: {
    complete: {
      true: {
        color: "$light-off-white",
      },
    },
  },
});

export const StyledStepIndicator = styled(Box, {
  position: "absolute",
  width: pxToRem(INDICATOR_WIDTH),
  height: "$2",
  borderRadius: "$round",
  bg: "$light-purple",
  top: 0,

  variants: {
    animate: {
      true: {
        transition: transition("left"),
      },
    },
  },
});