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

import { DocsTemplate } from '../../../.storybook'
import PopoverHeader from './PopoverHeader'
import { toast } from '../Toast/Toast'
import Icon from '../Icons/Icon'

const meta: Meta<typeof PopoverHeader> = {
  title: 'Components/Popover/PopoverHeader',
  component: PopoverHeader,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>PopoverHeader</code> component is a versatile header
              component designed for use in popovers. It can be customized with
              various styles, including color themes, icons, and logos.
            </span>
          }
        />
      ),
    },
    controls: { sort: 'requiredFirst' },
  },
}

export default meta

type Story = StoryObj<typeof PopoverHeader>

const Template: Story = {
  render: (args) => {
    const { headerText, logoUrl } = args
    return logoUrl ? (
      <PopoverHeader {...args} logoUrl={logoUrl} />
    ) : (
      <PopoverHeader
        {...args}
        logoUrl={undefined}
        headerText={headerText ?? 'Popover Header'}
      />
    )
  },
}

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

export const Red: Story = {
  ...Template,
  args: {
    styleType: 'red',
  },
}

export const Green: Story = {
  ...Template,
  args: {
    styleType: 'green',
  },
}

export const Blue: Story = {
  ...Template,
  args: {
    styleType: 'blue',
  },
}

export const BasicWithIcon: Story = {
  ...Template,
  args: {
    icon: 'info',
  },
}

export const RedWithIcon: Story = {
  ...Template,
  args: {
    icon: 'flag',
    styleType: 'red',
  },
}

export const GreenWithIcon: Story = {
  ...Template,
  args: {
    icon: 'check',
    styleType: 'green',
  },
}

export const BlueWithIcon: Story = {
  ...Template,
  args: {
    icon: 'info',
    styleType: 'blue',
  },
}

const closeCallout = () => {
  toast({ message: 'You clicked close', type: 'success' })
}

export const BasicWithClose: Story = {
  ...Template,
  args: {
    closeCallout,
  },
}

export const RedWithClose: Story = {
  ...Template,
  args: {
    closeCallout,
    styleType: 'red',
  },
}

export const GreenWithClose: Story = {
  ...Template,
  args: {
    closeCallout,
    styleType: 'green',
  },
}

export const BlueWithClose: Story = {
  ...Template,
  args: {
    closeCallout,
    styleType: 'blue',
  },
}

export const BasicWithIconAndClose: Story = {
  ...Template,
  args: {
    icon: 'info',
    closeCallout,
  },
}

export const RedWithIconAndClose: Story = {
  ...Template,
  args: {
    icon: 'flag',
    closeCallout,
    styleType: 'red',
  },
}

export const GreenWithIconAndClose: Story = {
  ...Template,
  args: {
    icon: 'check',
    closeCallout,
    styleType: 'green',
  },
}

export const BlueWithIconAndClose: Story = {
  ...Template,
  args: {
    icon: 'info',
    closeCallout,
    styleType: 'blue',
  },
}

export const WithLogo: Story = {
  ...Template,
  args: {
    logoUrl: 'https://images.pattern.com/library/library-logo.svg',
    closeCallout,
  },
}

export const HasBackButton: Story = {
  ...Template,
  args: {
    hasBackButton: true,
    closeCallout,
  },
}

export const customHeader: Story = {
  ...Template,
  args: {
    headerText: (
      <div className='flex flex-row items-center gap-4'>
        <div>Header Text</div>
        <div className='flex flex-row items-center gap-2'>
          <Icon icon='sellers' iconSize='20px' color='dark-red' />
          <span className='text-sm text-dark-red lowercase'>
            Secondary-Text
          </span>
          <Icon icon='info' iconSize='16px' color='dark-blue' />
        </div>
      </div>
    ),
  },
}