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

import { DocsTemplate } from '../../../.storybook'
import { PageHeader } from './PageHeader'
import { tableHeaderStoryArgs } from '../TableComponents/TableHeader/TableHeaderStoryHelper'
import Tag from '../Tag/Tag'

const meta: Meta<typeof PageHeader> = {
  title: 'Components/PageHeader',
  component: PageHeader,
  parameters: {
    layout: 'padded',
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-341&t=jsd8kEmb1sJfCa2m-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-341&t=jsd8kEmb1sJfCa2m-0'
          description={
            <span>
              The <code>PageHeader</code> component serves as a comprehensive
              header section for a page, offering various optional settings and
              functionalities to enhance user interaction. It includes options
              for displaying header information, search functionality, CSV
              export, page filters, tooltips, and customizable sections for
              additional content on the left, right, and bottom sections of the
              header.
            </span>
          }
          infoBullets={[
            <span key='bullet-1'>
              Utilize the <code>PageHeader</code> component as the header
              section of a page to provide users with essential information and
              functionalities.
            </span>,
            <span key='bullet-2'>
              Optionally utilize the <code>PageHeader.HeaderDivider</code> to
              add more dividers to the header. This can be useful when one of
              the section children are used.
            </span>,
            <span key='bullet-3'>
              Include header information such as name, value, and optional
              tooltips to convey important details about the page content.
            </span>,
            <span key='bullet-4'>
              Optionally enable users to download page data in CSV format.
            </span>,
            <span key='bullet-5'>
              Incorporate page filters to allow users to refine and customize
              the displayed content based on specific criteria.
            </span>,
            <span key='bullet-6'>
              Customize the layout and appearance of the <code>PageHeader</code>{' '}
              by specifying children components for the left, right, and bottom
              sections, allowing for additional content or actions tailored to
              the page's requirements.
            </span>,
            <span key='bullet-7'>
              Optionally integrate search functionality to allow users to search
              for specific information within the page.
            </span>,
            <span key='bullet-8'>
              Optionally include tooltip information to provide additional
              context or information about specific elements within the header.
            </span>,
          ]}
        />
      ),
    },
  },
}
export default meta

type Story = StoryObj<typeof PageHeader>

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

const {
  header,
  search: baseSearch,
  download: baseDownload,
  tooltip,
} = tableHeaderStoryArgs
const search = {
  ...baseSearch,
  value: '',
  onChange: () => {},
}
const download = {
  ...baseDownload,
  csvDownloadOptions: baseDownload.csvDownloadOptions.map((option) => ({
    ...option,
    callout: (link?: string | HTMLDivElement) => {
      if (link instanceof HTMLButtonElement) {
        option.callout(link)
      }
    },
  })),
}
const leftSectionChildren = (
  <div className='flex items-center gap-4'>
    <PageHeader.HeaderDivider large />
    <Tag color='blue'>Left Section Children</Tag>
  </div>
)
const rightSectionChildren = <Tag color='green'>Right Section Children</Tag>
const bottomSectionChildren = (
  <div
    className='border-top border-medium-purple bg-white p-4'
    style={{ borderRadius: '0 0 4px 4px' }}
  >
    <Tag color='red'>Bottom Section Children</Tag>
  </div>
)

// Update header to include tooltip children
const updatedHeader = {
  ...header,
  tooltip: {
    ...header.tooltip,
    children: <span>Tooltip content</span>,
  },
}

export const Basic: Story = {
  ...Template,
  args: {
    header: {
      ...updatedHeader,
      tooltip: undefined,
    },
  },
}

export const WithSearch: Story = {
  ...Template,
  args: {
    header: updatedHeader,
    search,
  },
}

export const WithNoHeader: Story = {
  ...Template,
  args: {
    search,
  },
}

export const WithTooltip: Story = {
  ...Template,
  args: {
    header: updatedHeader,
    search,
    tooltip,
  },
}

export const WithImage: Story = {
  ...Template,
  args: {
    header: {
      ...updatedHeader,
      image: {},
      name: undefined,
      value: undefined,
      tooltip: undefined,
    },
    search,
    tooltip,
  },
}

export const WithDownload: Story = {
  ...Template,
  args: {
    header: updatedHeader,
    search,
    download,
  },
}

export const WithLeftSectionChildren: Story = {
  ...Template,
  args: {
    header: updatedHeader,
    search,
    tooltip,
    leftSectionChildren,
  },
}

export const WithRightSectionChildren: Story = {
  ...Template,
  args: {
    header: updatedHeader,
    search,
    tooltip,
    rightSectionChildren,
  },
}

export const WithBottomSectionChildren: Story = {
  ...Template,
  args: {
    header: updatedHeader,
    search,
    tooltip,
    bottomSectionChildren,
  },
}

export const WithAllOptions: Story = {
  ...Template,
  args: {
    header: updatedHeader,
    search,
    download,
    tooltip,
    leftSectionChildren,
    rightSectionChildren,
    bottomSectionChildren,
  },
}

export const HeaderLoading: Story = {
  ...Template,
  args: {
    header: updatedHeader,
    search,
    download,
    tooltip,
    leftSectionChildren,
    rightSectionChildren,
    bottomSectionChildren,
    loading: {
      headerValue: true,
    },
  },
}

export const HeaderImageLoading: Story = {
  ...Template,
  args: {
    header: {
      ...updatedHeader,
      image: {},
      name: undefined,
      value: undefined,
      tooltip: undefined,
    },
    search,
    download,
    tooltip,
    leftSectionChildren,
    rightSectionChildren,
    bottomSectionChildren,
    loading: {
      headerImage: true,
    },
  },
}