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

import EmptyState from './EmptyState'
import { DocsTemplate } from '../../../.storybook'
import { toast } from '../Toast/Toast'

const meta: Meta<typeof EmptyState> = {
  title: 'Components/EmptyState',
  component: EmptyState,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>EmptyState</code> component serves as a placeholder that
              appears when there is no data available for a given section or
              when a specific condition is met. It helps manage user
              expectations by providing a clear message and visual
              representation of the empty state scenario. Additionally, the{' '}
              <code>EmptyState</code> component can optionally include a
              call-to-action, guiding users on how to proceed.
            </span>
          }
          infoBullets={[
            'Display the component in sections where data is expected but currently unavailable, such as an empty search result.',
            'Use concise and informative messaging to explain the reason for the absence of data and guide users on possible actions to remedy the situation.',
            'Optionally include a call-to-action, allowing users to take relevant actions, such as updating a search field or changing filter settings.',
          ]}
        />
      ),
    },
    controls: { sort: 'requiredFirst' },
  },
}

export default meta

type Story = StoryObj<typeof EmptyState>

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

const config = {
  buttonProps: {
    children: 'Button',
    onClick: () => {
      toast({ message: 'Button was clicked!', type: 'success' })
    },
  },
  primaryText: 'Primary Text Here',
  secondaryText: 'Secondary text here for display purposes.',
}
const { buttonProps, primaryText, secondaryText } = config

export const Everything: Story = {
  ...Template,
  args: { ...config, icon: 'sellers' },
}

export const NoSecondaryText: Story = {
  ...Template,
  args: {
    buttonProps,
    icon: 'sellers',
    primaryText,
  },
}

export const NoButton: Story = {
  ...Template,
  args: {
    icon: 'sellers',
    primaryText,
    secondaryText,
  },
}

export const NoIcon: Story = {
  ...Template,
  args: {
    buttonProps,
    primaryText,
    secondaryText,
  },
}

export const Simple: Story = {
  ...Template,
  args: {
    primaryText,
  },
}

export const ButtonVariation: Story = {
  ...Template,
  args: {
    buttonProps: {
      ...buttonProps,
      styleType: 'secondary',
    },
    primaryText,
    secondaryText,
  },
}