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

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

const meta: Meta<typeof Stepper> = {
  title: 'Components/Stepper',
  component: Stepper,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>Stepper</code> component is designed to guide users
              through a step-by-step process, such as user setup or any
              multi-part task. It presents a clear and linear flow, allowing
              users to complete one step at a time, ensuring they don't miss any
              crucial actions. The <code>Stepper</code> provides a structured
              and user-friendly approach to complex processes, ensuring a smooth
              and efficient user experience.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Implement the <code>Stepper</code> component in user setup,
              registration flows, or any other multi-step tasks where users need
              to complete sequential actions.
            </span>,
            <span key='second-bullet'>
              Each step should be clearly labeled within the{' '}
              <code>Stepper</code> to indicate its purpose and the user's
              progress in the overall process.
            </span>,
          ]}
        />
      ),
    },
  },
  decorators: [
    (Story) => (
      <div style={{ width: '400px' }}>
        <Story />
      </div>
    ),
  ],
}

export default meta

type Story = StoryObj<typeof Stepper>

const Template: Story = {
  render: function Render(args) {
    const [step, setStep] = useState(args.currentStep)

    const goBack = () => {
      setStep((prevState) => prevState - 1)
    }

    useEffect(() => {
      setStep(args.currentStep)
    }, [args.currentStep])

    return args.hideBackButton === true ? (
      <Stepper
        steps={args.steps}
        currentStep={step}
        hideBackButton={true}
        hideStepText={args.hideStepText}
      />
    ) : (
      <Stepper
        steps={args.steps}
        currentStep={step}
        callout={goBack}
        hideStepText={args.hideStepText}
        hideBackButton={false}
      />
    )
  },
}

export const Basic: Story = {
  ...Template,
  args: {
    steps: ['One', 'Two', 'Three', 'Four', 'Five'],
    currentStep: 1,
  },
}

export const HiddenBackButton: Story = {
  ...Template,
  args: {
    steps: ['One', 'Two', 'Three'],
    currentStep: 2,
    hideBackButton: true,
  },
}