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

import Button from './Button'
import { DocsTemplate } from '../../../.storybook'
import {
  buttonsConfig,
  confirmationConfig,
  destructiveButtonsConfig,
} from './ButtonStoryHelpers'

const meta: Meta<typeof Button> = {
  title: 'Components/Buttons/Button/With Icon',
  component: Button,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description='The Button component is a versatile element used to represent actionable items throughout the applications. It serves as a clickable interface element that triggers a specific action or interaction.'
          infoBullets={[
            <span key='first-bullet'>
              <code>as='button'</code> - This is a standard button use.
            </span>,
            <span key='second-bullet'>
              <code>as='link'</code> - This is used when the button is a
              navigational link.
            </span>,
            <span key='third-bullet'>
              <code>as='externalLink'</code> - This is used when the button is
              an external link that will navigate outside of the application.
            </span>,
            <span key='third-bullet'>
              <code>as='unstyled'</code> - This is used when you need an element
              to be clickable, but do not want to inherit the generic button
              styles.
            </span>,
          ]}
        />
      ),
    },
    controls: { sort: 'requiredFirst' },
  },
}

export default meta

type Story = StoryObj<typeof Button>

const Template: Story = {
  render: ({ ...args }) => {
    return <Button {...args} />
  },
}

export const Basic = {
  ...Template,
  args: {
    ...buttonsConfig.pencil,
  },
}

export const Confirmation = {
  ...Template,
  args: {
    ...buttonsConfig.like,
    ...confirmationConfig,
  },
}

export const Destructive = {
  ...Template,
  args: {
    ...buttonsConfig.trash,
    ...destructiveButtonsConfig,
  },
}

export const PrimaryBlack = {
  ...Template,
  args: {
    ...buttonsConfig.pencil,
    styleType: 'primary',
  },
}

export const PrimaryDestructive = {
  ...Template,
  args: {
    ...buttonsConfig.trash,
    styleType: 'primary',
    destructive: true,
  },
}