import type { Meta, StoryObj } from '@storybook/vue3-vite';
import UiProgress from './UiProgress.vue';

/**
 * UiProgress is a horizontal bar that visualizes the progress of a determinate task.
 * Use it for uploads, downloads, multi-step flows, and any operation with a known percentage; for indeterminate work, use `UiSpinner`.
 */
const meta: Meta<typeof UiProgress> = {
  title: 'Components/UiProgress',
  component: UiProgress,
  tags: ['autodocs'],
  argTypes: {
    modelValue: {
      control: { type: 'number', min: 0, max: 100 },
      description: 'The current progress value.',
    },
    max: {
      control: { type: 'number', min: 1 },
      description: 'The maximum value of the progress bar.',
    },
  },
  args: {
    modelValue: 33,
  },
};

export default meta;

type Story = StoryObj<typeof UiProgress>;

const defaultTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import { UiProgress } from '@aleph-alpha/ui-library'

const progress = ref(33)
</script>

<template>
  <UiProgress v-model="progress" />
</template>`;

/**
 * A basic progress bar displaying current progress.
 */
export const Default: Story = {
  render: (args) => ({
    components: { UiProgress },
    setup() {
      return { args };
    },
    template:
      '<UiProgress :model-value="args.modelValue" :max="args.max" class="w-60" />',
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

const customMaxTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import { UiProgress } from '@aleph-alpha/ui-library'

const progress = ref(75)
const max = 200
</script>

<template>
  <UiProgress v-model="progress" :max="max" />
</template>`;

/**
 * Progress bar with a custom maximum value. Here, progress is 75 out of 200.
 */
export const CustomMax: Story = {
  render: (args) => ({
    components: { UiProgress },
    setup() {
      return { args };
    },
    template:
      '<UiProgress :model-value="args.modelValue" :max="args.max" class="w-60" />',
  }),
  args: {
    modelValue: 75,
    max: 200,
  },
  parameters: {
    docs: {
      source: {
        code: customMaxTemplateSource,
      },
    },
  },
};
