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

import { DocsTemplate } from '../../../.storybook'
import PopoverFormContainer from './PopoverFormContainer'
import Button from '../Button/Button'

const meta: Meta<typeof PopoverFormContainer> = {
  title: 'Components/Popover/PopoverFormContainer',
  component: PopoverFormContainer,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>PopoverFormContainer</code> component ensures a
              consistent UI experience when placing form elements inside a
              popover. It provides a structured layout with a header, container,
              and footer, along with appropriate button styles for form actions.
              This component streamlines the design and presentation of form
              content within popovers, enhancing user interaction and visual
              consistency.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Utilize the <code>PopoverFormContainer</code> component whenever
              you need to include a form element within a popover, ensuring a
              unified UI experience.
            </span>,
            <span key='second-bullet'>
              Include a header in the container to provide a clear title or
              description of the form's purpose or context.
            </span>,
            <span key='third-bullet'>
              Use the container to present the form elements and input fields,
              arranging them in a visually organized and user-friendly manner.
            </span>,
          ]}
        />
      ),
    },
  },
}

export default meta

type Story = StoryObj<typeof PopoverFormContainer>

const Template: Story = {
  render: (args) => {
    return (
      <div className='rounded-sm border border-light-gray'>
        <PopoverFormContainer {...args} />
      </div>
    )
  },
}

export const Basic: Story = {
  ...Template,
  args: {
    header: 'Storybook Rules',
    children: <div>Are you sure Storybook rules?</div>,
  },
}

export const WithFooter: Story = {
  ...Template,
  args: {
    header: 'Storybook Rules',
    children: <div>Are you sure Storybook rules?</div>,
    footerChildren: (
      <div>
        <Button className='mr-4'>No</Button>
        <Button styleType='primary'>Yes</Button>
      </div>
    ),
  },
}

export const NoBodyPadding: Story = {
  ...Template,
  args: {
    header: 'No Body Padding',
    children: (
      <div>
        This is necessary if there is content that needs to span 100% from left
        to right without a gap.
      </div>
    ),
    noPadding: true,
  },
}

export const NoHeaderInMobile: Story = {
  ...Template,
  args: {
    header: 'No Header in Mobile',
    children: (
      <div>
        Resize the window to see this in a mobile view if the{' '}
        <code>usedWithMobileDrawer</code> prop is used. The header is removed
        because a mobile drawer comes with a header.
      </div>
    ),
    usedWithMobileDrawer: true,
  },
}