import * as ToastPrimitive from "@radix-ui/react-toast";
import { styled, keyframes } from "../../theme";
import { pxToRem } from "../../utils";
import { Box } from "../box";

const show = keyframes({
  "0%": { opacity: 0 },
  "100%": { opacity: 1 },
});

const hide = keyframes({
  "0%": { opacity: 1 },
  "100%": { opacity: 0 },
});

export const StyledProvider = styled(ToastPrimitive.Provider);

export const StyledRoot = styled(ToastPrimitive.Root, {
  backgroundColor: "$dark-chromia-dark",
  color: "$dark-off-white",
  borderRadius: "$xs",
  padding: "$4",
  display: "grid",
  gridTemplateAreas: '"title action"',
  gridTemplateColumns: "max-content auto max-content",
  columnGap: "$4",
  alignItems: "center",
  justifyContent: "center",
  mt: "$2",

  "@s": { py: "$2", justifyContent: "space-between" },

  '&[data-state="open"]': {
    animation: `${show} 300ms cubic-bezier(0.16, 1, 0.3, 1)`,
  },
  '&[data-state="closed"]': {
    animation: `${hide} 100ms ease-in`,
  },
  '&[data-swipe="move"]': {
    transform: "translateX(var(--radix-toast-swipe-move-x))",
  },
  '&[data-swipe="cancel"]': {
    animation: "transform 200ms ease-out",
  },
  '&[data-swipe="end"]': {
    animation: `${hide} 100ms ease-out`,
  },

  variants: {
    variant: {
      success: {
        backgroundColor: "$light-green",
        color: "$dark-chromia-dark",
      },
      warning: {
        backgroundColor: "$light-yellow",
        color: "$dark-chromia-dark",
      },
    },
    withDescription: {
      true: {},
    },
    withIcon: {
      true: {},
    },
  },
  compoundVariants: [
    {
      withDescription: true,
      withIcon: false,
      css: {
        gridTemplateAreas: '"title action" "description action"',
      },
    },
    {
      withIcon: true,
      withDescription: false,
      css: {
        gridTemplateAreas: '"icon title action"',
        "@s": {
          gridTemplateColumns: "auto max-content 1fr",
        },
      },
    },
    {
      withDescription: true,
      withIcon: true,
      css: {
        gridTemplateAreas: '"icon title action" "icon description action"',
      },
    },
  ],
});

export const StyledIconContainer = styled(Box, {
  gridArea: "icon",
});

export const StyledTitle = styled(ToastPrimitive.Title, {
  gridArea: "title",
});

export const StyledTextTitle = styled("span", {
  fontSize: "$2",
  fontWeight: "$bold",
  fontFamily: "$text",
  lineHeight: "$2",
});

export const StyledDescription = styled(ToastPrimitive.Description, {
  gridArea: "description",
  marginTop: "$1",
});

export const StyledClose = styled(ToastPrimitive.Close, {
  gridArea: "action",
  "@s": {
    justifySelf: "end",
  },
});

export const StyledViewport = styled(ToastPrimitive.Viewport, {
  position: "fixed",
  zIndex: 1,
  maxWidth: pxToRem(320),
  "@s": { maxWidth: "100%", width: "100%", p: "$4" },
  variants: {
    position: {
      topRight: {
        top: "$6",
        right: "$6",
      },
      topLeft: {
        top: "$6",
        left: "$6",
      },
      bottomRight: {
        bottom: "$6",
        right: "$6",
      },
      bottomLeft: {
        bottom: "$6",
        left: "$6",
      },
      bottomCenter: {
        bottom: "$10",
        left: "50%",
        transform: "translateX(-50%)",
      },
    },
  },
});