// eslint-disable-next-line import/no-extraneous-dependencies
import { action } from "@storybook/addon-actions";
import type { Meta, StoryObj } from "@storybook/react";

import { ThemeProviderDecorators } from "@/storybook/Decorator";

import Counter from "./counter";

const meta = {
  title: "UI/Counter",
  component: Counter,
  tags: ["autodocs"],
  decorators: ThemeProviderDecorators,
  args: {
    value: 0,
    onChange: action("Counter Clicked"),
  },
  render: (args) => (
    <div id="fakeWrapper" className="flex w-full justify-center">
      <Counter {...args} />
    </div>
  ),
} satisfies Meta<typeof Counter>;

export default meta;

type Story = StoryObj<typeof Counter>;

export const DefaultCounter: Story = {};
export const CounterWithMaxValue: Story = {
  args: {
    max: 5,
    value: 5,
  },
};
export const CounterWithMaxValueText: Story = {
  args: {
    max: 5,
    value: 5,
    maxText: "Maksimum değer",
  },
};
export const CounterWithMinValue: Story = {
  args: {
    min: 0,
  },
};
export const CounterWithMinValueText: Story = {
  args: {
    min: 0,
    minText: "Minimum değer",
  },
};

export const CounterWithMinAndMaxValue: Story = {
  args: {
    min: 0,
    max: 5,
  },
};

export const CounterWithMinAndMaxValueCustomText: Story = {
  args: {
    min: -5,
    max: 5,
    value: 5,
    minText: "Minimum değer",
    maxText: "Maksimum değer",
  },
};

export const CounterWithMinAndMaxValueDefaultText: Story = {
  args: {
    min: -5,
    max: 5,
    value: 5,
    minText: null,
    maxText: null,
  },
};