import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
import { isValidElement, cloneElement } from "react";
import { styled } from "../../theme";
import { Flex } from "../flex";
import { typographyVariants } from "../text";

export const StyledRoot = styled(RadioGroupPrimitive.Root, {
  display: "flex",
  gap: "$4",
  "&:disabled": {
    opacity: "$disabled",
  },
});

export const StyledLabel = styled("label", { ...typographyVariants.body4 });

export const StyledContainer = styled(Flex, {
  alignItems: "center",
  justifyContent: "center",
});

export const StyledItemContainer: React.FC<
  React.ComponentProps<typeof StyledContainer> & { asChild: boolean; children: React.ReactNode }
> = (props) => {
  const { asChild, children, ...rest } = props;
  if (asChild && children && isValidElement(children)) {
    return cloneElement(children, rest);
  }
  return <StyledContainer {...rest}>{children}</StyledContainer>;
};

export const StyledIndicator = styled(RadioGroupPrimitive.Indicator, {
  color: "$light-off-white",
  ...typographyVariants.body4,
});

export const StyledItem = styled(RadioGroupPrimitive.Item, {
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  height: "$6",
  borderRadius: "$xs",
  backgroundColor: "$off-white-9",
  padding: "$3",

  color: "$off-white-72",

  "&:hover:not([disabled]):not([data-state='checked'])": {
    backgroundColor: "$off-white-18",
    color: "$light-off-white",
  },

  '&[data-state="checked"]': {
    backgroundColor: "$light-soft-pink",
    [`${StyledLabel}`]: {
      display: "none",
    },

    [`${StyledIndicator}`]: {
      color: "$dark-chromia-dark",
    },
  },
});