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

import { DocsTemplate } from '../../../.storybook'
import ModalComponent from './Modal'
import Button from '../Button/Button'
import { toast } from '../Toast/Toast'

const meta: Meta<typeof ModalComponent> = {
  title: 'Components/Modal',
  component: ModalComponent,
  argTypes: {
    children: { control: false },
    headerContent: { control: false },
    footerContent: { control: false },
    closeCallout: { control: false },
    confirmation: { control: false },
  },
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=13985-12006&p=f&t=9R4mlUY42yEaNlLp-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=13985-12006&p=f&t=9R4mlUY42yEaNlLp-0'
          description={
            <span>
              The <code>Modal</code> component provides a versatile overlay
              screen that holds information, prompts, or additional content,
              overlaying the main application interface. It is commonly used to
              display important messages, alerts, forms, or other interactive
              content while temporarily blocking interaction with the underlying
              application.
            </span>
          }
          infoBullets={[
            <span key='bullet-one'>
              Utilize the <code>Modal</code> component to display critical
              information or interactive content that requires user attention
              without navigating away from the current context.
            </span>,
            <span key='bullet-two'>
              Include various types of content within the <code>Modal</code>,
              such as text, forms, images, videos, or other custom components,
              based on the specific use case.
            </span>,
          ]}
        />
      ),
    },
  },
}
export default meta

type Story = StoryObj<typeof ModalComponent>

const Modal = (args: any) => {
  const [visible, setVisible] = useState(false)

  return (
    <>
      <Button onClick={() => setVisible(true)}>Open Modal</Button>
      <ModalComponent
        {...args}
        isOpen={visible}
        closeCallout={() => setVisible(false)}
      />
    </>
  )
}

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

const commonArgs = {
  headerContent: 'Modal Header',
  children: (
    <div>
      <span className='text-base'>Modal content goes here</span>
    </div>
  ),
  footerContent: <div>Footer content goes here</div>,
  noContentPadding: false,
}

export const Basic: Story = {
  ...Template,
  args: commonArgs,
}

export const NoContentPadding: Story = {
  ...Template,
  args: {
    ...commonArgs,
    noContentPadding: true,
    headerContent: 'No Content Padding Modal',
    children: (
      <div className='bg-light-blue text-base'>
        This modal content ignores the built-in padding on the left and right
        sides of the content container. The light blue background helps
        visualize that the content now spans the full width of its container.
        This is useful when the content itself needs to manage its own padding
        or when a full-bleed effect is desired for certain child elements like
        images or banners.
      </div>
    ),
  },
}

export const WithoutFooter: Story = {
  ...Template,
  args: {
    ...commonArgs,
    footerContent: null,
  },
}

export const WithoutHeader: Story = {
  ...Template,
  args: {
    ...commonArgs,
    hideHeader: true,
  },
}

export const BasicHideCloseIcon: Story = {
  ...Template,
  args: {
    ...commonArgs,
    hideCloseIcon: true,
    disableOutsideClick: true,
    footerContent: ({ close }) => (
      <div>
        <Button onClick={close}>Close Modal</Button>
      </div>
    ),
    children: (
      <div className='text-sm'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </div>
    ),
  },
}

export const LargeContent: Story = {
  ...Template,
  args: {
    ...commonArgs,
    headerContent: 'Scrollable Modal',
    children: (
      <div>
        <div className='flex flex-col gap-4 text-sm'>
          {Array.from({ length: 32 }).map((_, i) => (
            <div key={i}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </div>
          ))}
        </div>
      </div>
    ),
  },
}

export const Confirmation: Story = {
  ...Template,
  args: {
    ...commonArgs,
    headerContent: 'Confirmation Modal',
    confirmation: {
      type: 'black',
      header: 'Are you sure?',
      body: 'This will perform some action. Would you like to continue?',
      confirmCallout: () => {
        toast({ message: 'You clicked confirm!', type: 'success' })
      },
      cancelCallout: () => {
        toast({ message: 'You clicked cancel!', type: 'info' })
      },
    },
  },
}

export const DestructiveConfirmation: Story = {
  ...Template,
  args: {
    ...commonArgs,
    confirmation: {
      type: 'red',
      header: 'Are you sure?',
      body: 'This will perform some action. Would you like to continue?',
      confirmCallout: () => {
        toast({ message: 'You clicked confirm!', type: 'success' })
      },
      cancelCallout: () => {
        toast({ message: 'You clicked cancel!', type: 'info' })
      },
    },
  },
}

export const SmallSize: Story = {
  ...Template,
  args: {
    ...commonArgs,
    size: 'sm',
    headerContent: 'Small Modal',
  },
}

export const MediumSize: Story = {
  ...Template,
  args: {
    ...commonArgs,
    size: 'md',
    headerContent: 'Medium Modal',
  },
}

export const LargeSize: Story = {
  ...Template,
  args: {
    ...commonArgs,
    size: 'lg',
    headerContent: 'Large Modal',
  },
}

export const ExtraLargeSize: Story = {
  ...Template,
  args: {
    ...commonArgs,
    size: 'xl',
    headerContent: 'Extra Large Modal',
  },
}
ExtraLargeSize.storyName = 'XL Size'

export const FullWidth: Story = {
  ...Template,
  args: {
    ...commonArgs,
    fullWidth: true,
    headerContent: 'Full Width Modal',
  },
}