import { createStitches, defaultThemeMap } from "@stitches/react";
import { pxToRem } from "../utils";
import { colors } from "./colors";
import { shadows } from "./shadows";
import { fonts, fontSizes, fontWeights, lineHeights } from "./fonts";
import { media } from "./breakpoints";
import { space } from "./spacings";
import type * as Stitches from "@stitches/react";

export const { styled, css, globalCss, keyframes, getCssText, theme, createTheme, config } =
  createStitches({
    prefix: "cw-",
    themeMap: { ...defaultThemeMap, opacity: "opacities" },
    theme: {
      opacities: {
        disabled: 0.36,
      },
      colors,
      fonts,
      fontSizes,
      fontWeights,
      lineHeights,
      space,
      sizes: {
        1: pxToRem(4),
        2: pxToRem(8),
        3: pxToRem(16),
        4: pxToRem(24),
        5: pxToRem(32),
        6: pxToRem(40),
        7: pxToRem(48),
        8: pxToRem(64),
        9: pxToRem(128),
      },
      radii: {
        xs: pxToRem(6),
        s: pxToRem(10),
        m: pxToRem(20),
        round: "9999px",
      },
      shadows: { ...shadows, ...colors },
    },
    media,
    utils: {
      // Abbreviated properties
      p: (value: Stitches.PropertyValue<"padding">) => ({
        padding: value,
      }),
      pt: (value: Stitches.PropertyValue<"paddingTop">) => ({
        paddingTop: value,
      }),
      pr: (value: Stitches.PropertyValue<"paddingRight">) => ({
        paddingRight: value,
      }),
      pb: (value: Stitches.PropertyValue<"paddingBottom">) => ({
        paddingBottom: value,
      }),
      pl: (value: Stitches.PropertyValue<"paddingLeft">) => ({
        paddingLeft: value,
      }),
      px: (value: Stitches.PropertyValue<"paddingLeft">) => ({
        paddingLeft: value,
        paddingRight: value,
      }),
      py: (value: Stitches.PropertyValue<"paddingTop">) => ({
        paddingTop: value,
        paddingBottom: value,
      }),
      m: (value: Stitches.PropertyValue<"margin">) => ({
        margin: value,
      }),
      mt: (value: Stitches.PropertyValue<"marginTop">) => ({
        marginTop: value,
      }),
      mr: (value: Stitches.PropertyValue<"marginRight">) => ({
        marginRight: value,
      }),
      mb: (value: Stitches.PropertyValue<"marginBottom">) => ({
        marginBottom: value,
      }),
      ml: (value: Stitches.PropertyValue<"marginLeft">) => ({
        marginLeft: value,
      }),
      mx: (value: Stitches.PropertyValue<"marginLeft">) => ({
        marginLeft: value,
        marginRight: value,
      }),
      my: (value: Stitches.PropertyValue<"marginTop">) => ({
        marginTop: value,
        marginBottom: value,
      }),
      size: (value: Stitches.PropertyValue<"width">) => ({
        width: value,
        height: value,
      }),
      bg: (value: Stitches.PropertyValue<"background">) => ({
        background: value,
      }),
      pos: (value: Stitches.PropertyValue<"position">) => ({
        position: value,
      }),
    },
  });

export type CSS = Stitches.CSS<typeof config>;

// Stitches.CSS does not include typings for variants at all, this is a quick fix
export type StyledCSS = CSS & {
  variants?: Record<string, Record<string | number, CSS>>;
};

// A helper for type hinting a single variant, instead of a whole variants object
export type CSSSingleVariant = Exclude<StyledCSS["variants"], undefined>[string];