// InteractiveGradient.stories.tsx

import React from "react";
import { Meta, StoryFn, StoryObj } from "@storybook/react";
import {
  InteractiveGradient,
  InteractiveGradientProps,
} from "../ui/InteractiveGradient";

const meta: Meta<InteractiveGradientProps> = {
  title: "Components/InteractiveGradient",
  component: InteractiveGradient,
  // ArgTypes let you control and document each prop in Storybook's UI
  argTypes: {
    backgroundGradient: {
      control: { type: "object" },
      description: "Linear gradient background colors ([color1, color2]).",
      defaultValue: ["rgb(8, 10, 15)", "rgb(0, 17, 32)"],
      table: {
        type: {
          summary: "[string, string]",
        },
        defaultValue: { summary: "['rgb(8, 10, 15)', 'rgb(0, 17, 32)']" },
      },
    },
    circleColors: {
      control: { type: "object" },
      description:
        'Up to five radial gradient circle colors in "R,G,B" or "rgb(r,g,b)" form.',
      defaultValue: [
        "18, 113, 255",
        "107, 74, 255",
        "100, 100, 255",
        "50, 160, 220",
        "80, 47, 122",
      ],
      table: {
        type: {
          summary: "string[]",
        },
        defaultValue: {
          summary: `['18, 113, 255','107, 74, 255','100, 100, 255','50, 160, 220','80, 47, 122']`,
        },
      },
    },
    interactiveColor: {
      control: { type: "text" },
      description: "Color (in R,G,B form) for the mouse-follow bubble.",
      defaultValue: "140, 100, 255",
      table: {
        type: {
          summary: "string",
        },
        defaultValue: { summary: `'140, 100, 255'` },
      },
    },
    circleSize: {
      control: { type: "text" },
      description: 'CSS size for the radial circles. e.g. "80%", "200px", etc.',
      defaultValue: "80%",
      table: {
        type: {
          summary: "string",
        },
        defaultValue: { summary: `'80%'` },
      },
    },
    blending: {
      control: {
        type: "select",
        options: [
          "normal",
          "multiply",
          "screen",
          "overlay",
          "darken",
          "lighten",
          "color-dodge",
          "color-burn",
          "hard-light",
          "soft-light",
          "difference",
          "exclusion",
          "hue",
          "saturation",
          "color",
          "luminosity",
        ],
      },
      description: "CSS mix-blend-mode for the radial gradients.",
      defaultValue: "hard-light",
      table: {
        type: {
          summary: 'React.CSSProperties["mixBlendMode"]',
        },
        defaultValue: { summary: `'hard-light'` },
      },
    },
  },
};

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

const Template: StoryFn<InteractiveGradientProps> = (args) => (
  <div style={{ width: "80vw", height: "80vh" }}>
    <InteractiveGradient {...args} />
  </div>
);
/**
 * Default story - uses the default prop values
 */
export const Default: Story = Template.bind({});

Default.args = {};

/**
 * Custom story - override some of the prop values
 */
export const CustomColors: Story = Template.bind({});

CustomColors.args = {
  backgroundGradient: ["rgb(50, 0, 70)", "rgb(0, 40, 80)"],
  circleColors: [
    "129,219,176",
    "236,221,191",
    "198,229,189",
    "92,170,125",
    "152,200,200",
    "137,200,205",
    "230,220,180",
  ],
  interactiveColor: "198,219,149",
  circleSize: "70%",
  blending: "screen",
};