import React from 'react'
import type { Meta, StoryObj } from '@storybook/react-vite'

import { DocsTemplate } from '../../../.storybook'
import ProgressBar from './ProgressBar'

const progressBarMeta: Meta<typeof ProgressBar> = {
  title: 'Components/Loaders/ProgressBar',
  component: ProgressBar,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=3268-505&t=jsd8kEmb1sJfCa2m-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=3268-505&t=jsd8kEmb1sJfCa2m-0'
          description={
            <span>
              The <code>ProgressBar</code> component is designed to visually
              track the progress of a task, providing users with a clear
              indication of completion.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Implement the <code>ProgressBar</code> component when you want to
              display the progress of an ongoing task, such as file uploads,
              form submissions, or data processing.
            </span>,
            <span key='second-bullet'>
              The <code>ProgressBar</code> component is not intended to be used
              for navigation.
            </span>,
            <span key='third-bullet'>
              The <code>ProgressBar</code> will fill the space of its parent
              container. There is also a <code>min-width</code> of 100px in case
              the parent does not have a width.
            </span>,
          ]}
        />
      ),
    },
  },
  decorators: [
    (Story) => (
      <div style={{ width: 300 }}>
        <Story />
      </div>
    ),
  ],
}
export default progressBarMeta

type Story = StoryObj<typeof ProgressBar>

const progressBarTemplate: Story = {
  render: (args) => <ProgressBar {...args} />,
}

const progressBarArgs = {
  percentage: 50,
}
const label = 'Label Here'

const createProgressBarStory = (args) => ({
  ...progressBarTemplate,
  args,
})

export const Basic: Story = createProgressBarStory(progressBarArgs)

export const WithLabel: Story = createProgressBarStory({
  ...progressBarArgs,
  formLabelProps: {
    label,
  },
})

export const WithBottomText: Story = createProgressBarStory({
  ...progressBarArgs,
  helperText: 'Some text here',
})

export const WithLabelAndBottomText: Story = createProgressBarStory({
  ...progressBarArgs,
  formLabelProps: {
    label,
  },
  helperText: 'Some text here',
})

export const WithTooltip: Story = createProgressBarStory({
  ...progressBarArgs,
  formLabelProps: {
    label,
    tooltip: {
      tooltipContent: 'This is a tooltip',
    },
  },
})

export const Required: Story = createProgressBarStory({
  ...progressBarArgs,
  formLabelProps: {
    label,
    required: true,
  },
})

export const Complete: Story = createProgressBarStory({
  ...progressBarArgs,
  percentage: 100,
  formLabelProps: {
    label,
    showRightLabel: true,
  },
})

export const RightLabel: Story = createProgressBarStory({
  ...progressBarArgs,
  formLabelProps: {
    label,
    showRightLabel: true,
  },
})

export const AllFieldsWithError: Story = createProgressBarStory({
  ...progressBarArgs,
  formLabelProps: {
    label,
    showRightLabel: true,
  },
  error: true,
  helperText: 'Some text here',
})