import type { Meta, StoryObj } from '@storybook/react'
import { SvgMagnifyingGlass } from '@chainlink/blocks-icons'
import { AlgoliaSearch } from '../AlgoliaSearch'
import { Button } from '../Button'
import {
  PageHeader,
  PageHeaderTitle,
  PageHeaderNavTabs,
  PageHeaderActions,
  PageHeaderBreadcrumb,
} from './PageHeader'

const meta = {
  title: 'Navigation/PageHeader',
  component: PageHeader,
  parameters: {
    layout: 'fullscreen',
  },
  argTypes: {
    className: {
      control: 'text',
      description: 'Additional CSS classes to apply to the page header.',
      table: {
        type: { summary: 'string' },
      },
    },
  },
} satisfies Meta<typeof PageHeader>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args) => (
    <PageHeader reserveSpace="spacer" {...args}>
      <PageHeaderTitle>Page Title</PageHeaderTitle>
      <PageHeaderActions>
        <Button
          variant="ghost"
          size="xs"
          className="h-8 w-8 bg-muted/30 p-0 hover:bg-muted/50 md:hidden"
        >
          <SvgMagnifyingGlass className="h-4 w-4" />
          <span className="sr-only">Search</span>
        </Button>
        <Button
          variant="primary"
          size="sm"
          className="h-8 px-4 text-xs font-semibold"
        >
          Connect
        </Button>
      </PageHeaderActions>
    </PageHeader>
  ),
}

export const WithNavTabs: Story = {
  render: (args) => (
    <PageHeader {...args}>
      <PageHeaderNavTabs
        title="Dashboard"
        path="/dashboard"
        links={[
          { href: '/dashboard', name: 'Dashboard' },
          { href: '/analytics', name: 'Analytics' },
          { href: '/settings', name: 'Settings' },
        ]}
        renderLink={({ href, children }) => <a href={href}>{children}</a>}
      />
      <PageHeaderActions>
        <Button
          variant="primary"
          size="sm"
          className="h-8 px-4 text-xs font-semibold"
        >
          Connect
        </Button>
      </PageHeaderActions>
    </PageHeader>
  ),
}

export const WithAlgoliaSearch: Story = {
  render: (args) => (
    <PageHeader {...args}>
      <PageHeaderNavTabs
        title="Data Feeds"
        path="/feeds"
        links={[
          { href: '/', name: 'Home' },
          { href: '/feeds', name: 'Feeds' },
          { href: '/streams', name: 'Streams' },
        ]}
        renderLink={({ href, children }) => <a href={href}>{children}</a>}
      />
      <PageHeaderActions>
        <AlgoliaSearch
          className="mr-2 !h-10 !w-10 md:mr-0 md:!h-auto md:!w-auto"
          enableSearch={true}
        />
        <Button
          variant="primary"
          size="sm"
          className="h-8 px-4 text-xs font-semibold"
        >
          Connect
        </Button>
      </PageHeaderActions>
    </PageHeader>
  ),
}

export const WithBreadcrumb: Story = {
  render: (args) => (
    <PageHeader {...args}>
      <PageHeaderBreadcrumb
        items={[
          { label: 'Workflows', href: '/' },
          { label: 'Platinum Price', href: '/platinum-price' },
        ]}
        renderLink={({ href, label }) => <a href={href}>{label}</a>}
      />
      <PageHeaderActions>
        <Button
          variant="primary"
          size="sm"
          className="h-8 px-4 text-xs font-semibold"
        >
          Connect
        </Button>
      </PageHeaderActions>
    </PageHeader>
  ),
}
export const WithBreadcrumbMultiple: Story = {
  render: (args) => (
    <PageHeader {...args}>
      <PageHeaderBreadcrumb
        items={[
          { label: 'Workflows', href: '/' },
          { label: 'Platinum Price', href: '/platinum-price' },
          { label: 'page', href: '/page' },
        ]}
        renderLink={({ href, label }) => <a href={href}>{label}</a>}
      />
      <PageHeaderActions>
        <Button
          variant="primary"
          size="sm"
          className="h-8 px-4 text-xs font-semibold"
        >
          Connect
        </Button>
      </PageHeaderActions>
    </PageHeader>
  ),
}