import React from "react";
import { Meta, StoryFn } from "@storybook/react";
import PixelatedPerlinCanvas, {
  PixelatedPerlinCanvasProps,
} from "../ui/PixelatedPerlinCanvas";

// 1) Default export: metadata about the component
export default {
  title: "Components/PixelatedPerlinCanvas",
  component: PixelatedPerlinCanvas,
  argTypes: {
    nodes: { control: { type: "number", min: 1, max: 20 } },
    octaves: { control: { type: "number", min: 1, max: 8 } },
    persistence: { control: "number" },
    angleStep: { control: "number" },
    colorStops: { control: "object" },
  },
} satisfies Meta<typeof PixelatedPerlinCanvas>;

// 2) Template to create stories
const Template: StoryFn<PixelatedPerlinCanvasProps> = (args) => (
  <div style={{ width: "80vw", height: "80vh" }}>
    <PixelatedPerlinCanvas {...args} />
  </div>
);

// 3) Named stories for different prop sets

export const Default = Template.bind({});
Default.args = {
  // By default, these are the props used in your component code.
  // (No special overrides, just letting the component use default values)
};

export const CustomColorStops = Template.bind({});
CustomColorStops.args = {
  // Example: custom color stops, more nodes, etc.
  nodes: 6,
  octaves: 4,
  persistence: 0.6,
  angleStep: 0.015,
  colorStops: [
    { offset: 0.0, r: 250, g: 130, b: 130 },
    { offset: 0.3, r: 130, g: 255, b: 130 },
    { offset: 0.7, r: 130, g: 255, b: 255 },
    { offset: 1.0, r: 255, g: 255, b: 180 },
  ],
};

export const SlowFlow = Template.bind({});
SlowFlow.args = {
  angleStep: 0.005, // moves more slowly
};

export const HighOctaves = Template.bind({});
HighOctaves.args = {
  octaves: 6,
  persistence: 0.5,
};