/* eslint-disable no-console */
import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
import type { Meta, StoryObj } from "@storybook/react";

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

import PriceRange from "./price-range";

const meta = {
  title: "Widgets/Range/PriceRange",
  component: PriceRange,
  tags: ["autodocs"],
  decorators: ThemeProviderDecorators,
  args: {
    rangeValues: { start: Number("0000"), end: 2345 },
    initalRangeValues: { start: Number("0000"), end: 2345 },
    onChange: (val) => console.log("onChange: ", val),
  },
  parameters: {
    // 👇 The viewports object from the Essentials addon
    viewport: {
      // 👇 The viewports you want to use
      viewports: INITIAL_VIEWPORTS,
      // 👇 Your own default viewport
    },
  },
} satisfies Meta<typeof PriceRange>;

export default meta;

type Story = StoryObj<typeof PriceRange>;

export const DefaultPriceRange: Story = {
  render: (props) => {
    return (
      <div className="w-full max-w-[400px]">
        <PriceRange {...props} />
      </div>
    );
  },
};

export const USDPriceRange: Story = {
  render: (props) => {
    return (
      <div className="w-full max-w-[400px]">
        <PriceRange {...props} currencySymbol="USD" />
      </div>
    );
  },
};

export const EURPriceRange: Story = {
  render: (props) => {
    return (
      <div className="w-full max-w-[400px]">
        <PriceRange {...props} currencySymbol="EUR" />
      </div>
    );
  },
};