import {
  createThemeContract,
  fallbackVar,
  keyframes,
  style,
} from "@vanilla-extract/css";
import { recipe } from "@vanilla-extract/recipes";

const bounce = keyframes({
  "0%": { translate: "0 0" },
  "25%": { translate: "0 -10%" },
  "50%": { translate: "0 0" },
  "100%": { translate: "0 0" },
});

const rotation = keyframes({
  from: { transform: `rotate(0deg)` },
  to: { transform: `rotate(360deg)` },
});

export const syncTheme = createThemeContract({
  idle: null,
  inactive: null,
  syncing: null,
  error: null,
});

const backplate = style({
  cx: 10,
  cy: 10,
  r: 10,
});

export const icon = {
  container: recipe({
    base: {},

    variants: {
      rotate: {
        true: {
          animation: `${rotation} linear 2s both infinite`,
        },
      },
    },
  }),

  group: style({
    stroke: "none",
    fill: "none",
    fillRule: "evenodd",
  }),

  shape: style({
    fill: "white",
  }),

  idle: style([
    backplate,
    {
      fill: fallbackVar(syncTheme.idle, "green"),
    },
  ]),

  inactive: style([
    backplate,
    {
      fill: fallbackVar(syncTheme.inactive, "blue"),
    },
  ]),

  error: style([
    backplate,
    {
      fill: fallbackVar(syncTheme.error, "red"),
    },
  ]),

  syncing: style([
    backplate,
    {
      fill: fallbackVar(syncTheme.syncing, "purple"),
    },
  ]),

  bounce: style({
    vars: {
      "--duration": "1.5s",
    },

    animation: `${bounce} var(--duration) both infinite`,
    r: 1,
    fill: "white",

    selectors: {
      "&:nth-child(2)": {
        animationDelay: "calc(var(--duration) * -0.1)",
      },
      "&:nth-child(3)": {
        animationDelay: "calc(var(--duration) * -0.2)",
      },
    },
  }),
};

export const log = {
  item: style({
    display: "grid",
    gridTemplateColumns: "auto minmax(0, 1fr)",
    alignItems: "center",
    gap: "1rem",
    padding: "1rem 0",
    textAlign: "start",
    borderBlockStart: "1px solid hsl(0 0% 90%)",
    inlineSize: "100%",
  }),

  disclosureContent: style({
    display: "grid",
    gap: "1rem",
    borderInlineStart: "1px solid hsl(0 0% 90%)",
    paddingInlineStart: "1rem",
    marginBlockEnd: "1.5rem",
  }),

  itemTimestamp: style({ opacity: 0.5 }),
};