// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=944-30711&m=dev
import { html, nothing } from "lit";

import type { Meta, StoryObj } from "@storybook/web-components";

import {
  TemsSlider,
  type TemsSliderProps,
} from "@components/forms/tems-slider";

const meta: Meta<TemsSliderProps> = {
  title: "components/forms/tems-slider",
  tags: ["autodocs", "!dev", "Atoms"],
  render: (args) => {
    new TemsSlider();

    return html`<tems-slider
      type=${args.type || nothing}
      value=${args.value || nothing}
      value-max=${args.valueMax || nothing}
      min=${args.min || nothing}
      max=${args.max || nothing}
    ></tems-slider>`;
  },
  args: {
    type: "single",
    value: undefined,
    valueMax: undefined,
    min: 0,
    max: 100,
  },
  argTypes: {
    type: {
      control: "radio",
      options: ["single", "multiple"],
    },
    value: { control: "number" },
    valueMax: { control: "number" },
    min: { control: "number" },
    max: { control: "number" },
  },
};

export default meta;

export type TemsSliderStory = StoryObj<TemsSliderProps>;

export const Default: TemsSliderStory = {
  args: {},
};

export const Multiple: TemsSliderStory = {
  args: {
    type: "multiple",
    min: 0,
    max: 100,
  },
};