import type { Meta, StoryObj } from "@storybook/vue3-vite";
import { expect, within } from "storybook/test";
import DurationBar from "./DurationBar.vue";

const meta: Meta<typeof DurationBar> = {
  title: "Flow/DurationBar",
  component: DurationBar,
  tags: ["autodocs"],
};
export default meta;

type Story = StoryObj<typeof DurationBar>;

export const UnderSla: Story = {
  args: { ms: 12.4, max: 200, warnMs: 50, dangerMs: 100 },
  play: async ({ canvasElement }) => {
    const c = within(canvasElement);
    await expect(c.getByTestId("duration-value")).toHaveTextContent("12.4ms");
    await expect(c.getByTestId("duration-bar")).toHaveAttribute("data-tone", "ok");
  },
};

export const Warn: Story = {
  args: { ms: 70, max: 200, warnMs: 50, dangerMs: 100 },
  play: async ({ canvasElement }) => {
    await expect(within(canvasElement).getByTestId("duration-bar")).toHaveAttribute(
      "data-tone",
      "warn",
    );
  },
};

export const Danger: Story = {
  args: { ms: 160, max: 200, warnMs: 50, dangerMs: 100 },
  play: async ({ canvasElement }) => {
    await expect(within(canvasElement).getByTestId("duration-bar")).toHaveAttribute(
      "data-tone",
      "danger",
    );
  },
};

export const Scale: Story = {
  render: () => ({
    components: { DurationBar },
    template: `
      <div class="flex flex-col gap-2 bg-zinc-900 p-4 w-80">
        <DurationBar :ms="4" :max="200" :warn-ms="50" :danger-ms="100" />
        <DurationBar :ms="48" :max="200" :warn-ms="50" :danger-ms="100" />
        <DurationBar :ms="92" :max="200" :warn-ms="50" :danger-ms="100" />
        <DurationBar :ms="180" :max="200" :warn-ms="50" :danger-ms="100" />
      </div>
    `,
  }),
};