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

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

const meta: Meta<typeof BackgroundOverlay> = {
  title: '[Internal Components]/BackgroundOverlay',
  component: BackgroundOverlay,
  parameters: {
    layout: 'fullscreen',
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              <span role='img' aria-label='warning'>
                ⚠️
              </span>{' '}
              <strong>INTERNAL USE ONLY:</strong> The{' '}
              <code>BackgroundOverlay</code> component is designed exclusively
              for internal library use and is not exported via the module.ts
              file. This component should not be used directly outside of the
              component library.
              <br />
              <br />
              The <code>BackgroundOverlay</code> creates a semi-transparent
              overlay that covers the entire screen, typically used behind
              modals, popovers, or other overlay components to block interaction
              with the underlying content. It includes fade-in and fade-out
              animations controlled by the <code>isTransitioning</code> prop.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              <strong>Internal Use Only:</strong> This component is not part of
              the public API and should only be used within other library
              components.
            </span>,
            <span key='second-bullet'>
              The overlay is clickable and will call the <code>close</code>{' '}
              function when clicked, allowing users to dismiss the overlay by
              clicking outside of modal content.
            </span>,
            <span key='third-bullet'>
              Uses CSS animations (fadeIn/fadeOut) that are controlled by the{' '}
              <code>isTransitioning</code> prop for smooth entrance and exit
              effects.
            </span>,
            <span key='fourth-bullet'>
              Custom styles can be applied via the optional <code>style</code>{' '}
              prop to override default overlay appearance if needed.
            </span>,
          ]}
        />
      ),
    },
  },
  argTypes: {
    close: {
      action: 'close',
      description: 'Function called when the overlay is clicked',
    },
    isTransitioning: {
      control: 'boolean',
      description: 'Controls fade animation state',
    },
    style: {
      control: 'object',
      description: 'Optional custom styles for the overlay',
    },
  },
}

export default meta
type Story = StoryObj<typeof BackgroundOverlay>

const OverlayDemo = ({
  isTransitioning,
  style,
}: {
  isTransitioning: boolean
  style?: React.CSSProperties
}) => {
  const [showOverlay, setShowOverlay] = useState(false)
  const [isAnimating, setIsAnimating] = useState(isTransitioning)

  const handleShowOverlay = () => {
    setShowOverlay(true)
    setIsAnimating(false)
  }

  const handleCloseOverlay = () => {
    setIsAnimating(true)
    setTimeout(() => {
      setShowOverlay(false)
      setIsAnimating(false)
    }, 300) // Allow time for fade out animation
  }

  return (
    <div style={{ padding: '20px', position: 'relative', height: '500px' }}>
      <p>
        Click the button below to show the overlay, then click anywhere on the
        overlay to close it.
      </p>

      <Button
        onClick={handleShowOverlay}
        disabled={showOverlay}
        className='mt-5'
      >
        Show Background Overlay
      </Button>

      {showOverlay && (
        <BackgroundOverlay
          close={handleCloseOverlay}
          isTransitioning={isAnimating}
          style={style}
        />
      )}
    </div>
  )
}

export const Default: Story = {
  render: (args) => <OverlayDemo {...args} />,
  args: {
    isTransitioning: false,
  },
}

export const CustomStyle: Story = {
  render: (args) => <OverlayDemo {...args} />,
  args: {
    isTransitioning: false,
    style: {
      backgroundColor: 'rgba(0, 132, 255, 0.3)', // Blue-tinted overlay
    },
  },
}

export const WithTransition: Story = {
  render: (args) => <OverlayDemo {...args} />,
  args: {
    isTransitioning: true,
  },
}