import type { Meta, StoryObj } from "@storybook/react";
import { expect, userEvent, within } from "@storybook/test";

import { RangeSlider } from "./RangeSlider";

const meta = {
  component: RangeSlider,
  title: "Library/Charts/RangeSlider",
} satisfies Meta<typeof RangeSlider>;

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

export const InputRange: Story = {
  args: {
    min: 0,
    max: 20,
    step: 1,
    initialMax: 10,
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.clear(canvas.getByTestId("input-max-range"));
    await userEvent.type(canvas.getByTestId("input-max-range"), "15");

    const availableOptions = await canvas.findAllByTestId("highlighted-bar");
    await expect(availableOptions.length).toBe(15);
  },
};