import * as stylex from "@stylexjs/stylex";

import { Button } from "@/components/button";
import {
  Card,
  CardBody,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/card";
import { Grid } from "@/components/grid";
import { Text } from "@/components/typography/text";

import { primaryColor, uiColor } from "../../components/theme/color.stylex";
import { radius } from "../../components/theme/radius.stylex";
import { spacing } from "../../components/theme/spacing.stylex";
import { fontFamily } from "../../components/theme/typography.stylex";

const cyberpunkPrimaryTheme = stylex.createTheme(primaryColor, {
  bg: "light-dark(#fafefa, #0b140b)",
  bgSubtle: "light-dark(#f4fcf3, #0f1b0f)",
  component1: "light-dark(#e6f6eb, #122d13)",
  component2: "light-dark(#d6f1df, #123c15)",
  component3: "light-dark(#c4e8d1, #144b19)",
  border1: "light-dark(#c2e1d0, #175a1e)",
  border2: "light-dark(#b0d9c0, #1a6b24)",
  border3: "light-dark(#9ecdb2, #1a8028)",
  solid1: "light-dark(#008000, #1efd4a)",
  solid2: "light-dark(#006400, #25f149)",
  text1: "light-dark(#004d00, #2cf44d)",
  text2: "light-dark(#003300, #b1ffb2)",
  textContrast: "light-dark(#152715, #152715)",
});

const cyberpunkUiTheme = stylex.createTheme(uiColor, {
  bg: "light-dark(#fafefb, #0d130d)",
  bgSubtle: "light-dark(#f5fbf6, #151a15)",
  component1: "light-dark(#ebf3ed, #1d241d)",
  component2: "light-dark(#e3ebe4, #242b24)",
  component3: "light-dark(#dbe4dd, #2a332a)",
  border1: "light-dark(#d2dcd4, #323d32)",
  border2: "light-dark(#c7d1c9, #3e4c3d)",
  border3: "light-dark(#b2bfb5, #536652)",
  solid1: "light-dark(#839086, #5a7659)",
  solid2: "light-dark(#79857c, #688367)",
  text1: "light-dark(#5b675e, #a4baa3)",
  text2: "light-dark(#18221b, #e9efe9)",
  textContrast: "light-dark(#FFFFFF, #FFFFFF)",
});

const cyberpunkFontFamilyTheme = stylex.createTheme(fontFamily, {
  title: "Orbitron",
  sans: "Roboto Flex",
  serif: "Roboto Serif",
  mono: "JetBrains Mono",
});

const squareRadiusTheme = stylex.createTheme(radius, {
  xs: "0px",
  sm: "0px",
  md: "0px",
  lg: "0px",
  xl: "0px",
  "2xl": "0px",
  "3xl": "0px",
  "4xl": "0px",
  full: "0px",
});

const tightSpacingTheme = stylex.createTheme(spacing, {
  px: "1px",
  "0": "0px",
  "0.5": "0.09375rem",
  "1": "0.1875rem",
  "1.5": "0.28125rem",
  "2": "0.375rem",
  "2.5": "0.46875rem",
  "3": "0.5625rem",
  "3.5": "0.65625rem",
  "4": "0.75rem",
  "5": "0.9375rem",
  "6": "1.125rem",
  "7": "1.3125rem",
  "8": "1.5rem",
  "9": "1.6875rem",
  "10": "1.875rem",
  "11": "2.0625rem",
  "12": "2.25rem",
  "14": "2.625rem",
  "16": "3rem",
  "20": "3.75rem",
  "24": "4.5rem",
  "28": "5.25rem",
  "32": "6rem",
  "36": "6.75rem",
  "40": "7.5rem",
  "44": "8.25rem",
  "48": "9rem",
  "52": "9.75rem",
  "56": "10.5rem",
  "60": "11.25rem",
  "64": "12rem",
  "72": "13.5rem",
  "80": "15rem",
  "96": "18rem",
});

const cyberpunkCardTheme = [
  cyberpunkUiTheme,
  cyberpunkPrimaryTheme,
  cyberpunkFontFamilyTheme,
  squareRadiusTheme,
  tightSpacingTheme,
];

const styles = stylex.create({
  demo: {
    width: "100%",
  },
  panel: {
    gap: spacing["3"],
    display: "flex",
    flexDirection: "column",
  },
  card: {
    width: "100%",
  },
});

export function ThemingExample() {
  const card = (
    <Card style={styles.card}>
      <CardHeader>
        <CardTitle>Neon District</CardTitle>
        <CardDescription>
          The default token set keeps the card soft and neutral.
        </CardDescription>
      </CardHeader>
      <CardBody>
        <Text>
          Doors open at 21:00 with live visuals, modular synth sets, and a
          late-night rooftop broadcast.
        </Text>
      </CardBody>
      <CardFooter>
        <Button variant="secondary">Learn More</Button>
        <Button>Reserve Spot</Button>
      </CardFooter>
    </Card>
  );

  return (
    <>
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link
        rel="preconnect"
        href="https://fonts.gstatic.com"
        crossOrigin="anonymous"
      />
      <link
        href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Orbitron:wght@400..900&family=Roboto+Flex:opsz,wght,XOPQ,XTRA,YOPQ,YTDE,YTFI,YTLC,YTUC@8..144,100..1000,96,468,79,-203,738,514,712&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap"
        rel="stylesheet"
      />
      <Grid
        columns="repeat(auto-fit, minmax(280px, 1fr))"
        columnGap="6"
        rowGap="6"
        style={styles.demo}
      >
        <div {...stylex.props(styles.panel)}>{card}</div>
        <div {...stylex.props(styles.panel, cyberpunkCardTheme)}>{card}</div>
      </Grid>
    </>
  );
}