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

import MobileRouterTabs from './MobileRouterTabs'
import Alert from '../../../Alerts/Alert'
import { useMediaQuery } from '../../../../hooks/responsiveHooks'
import { DocsTemplate } from '../../../../../.storybook'

const meta: Meta<typeof MobileRouterTabs> = {
  title: 'Components/Tabs/RouterTabs/Mobile',
  component: MobileRouterTabs,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>RouterTabs</code> component is very similar to{' '}
              <code>Tabs</code>. It is a user interface element used to organize
              content into distinct sections, but it also updates the page url
              when a new tab is clicked. Each tab represents a different
              section, and when a tab is active, only the content associated
              with that tab is visible, while the content of other tabs remains
              hidden. <code>RouterTabs</code> provide an intuitive and
              space-efficient way to navigate between different sections of a
              page.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Use the <code>RouterTabs</code> component to organize content into
              distinct sections.
            </span>,
            <span key='second-bullet'>
              The active tab will appear with unique styles, making it clear
              which section is currently being viewed.
            </span>,
          ]}
        />
      ),
    },
  },
}

export default meta

type Story = StoryObj<typeof MobileRouterTabs>

const defaultMobileConfig = [
  {
    label: 'At A Glance',
    link: '/protect/at-a-glance',
  },
  {
    label: 'Buy Box',
    link: '/protect/buybox',
    subrows: [
      {
        label: 'Sellers',
        link: '/protect/buybox/sellers',
      },
      {
        label: 'Products',
        link: '/protect/buybox/products',
      },
      {
        label: 'Suppression',
        link: '/protect/buybox/suppression',
      },
    ],
  },
  {
    label: 'Compliance',
    link: '/protect/compliance',
    subrows: [
      {
        label: 'Sellers',
        link: '/protect/compliance/sellers',
      },
      {
        label: 'Products',
        link: '/protect/compliance/products',
      },
      {
        label: 'Marketplaces',
        link: '/protect/compliance/marketplaces',
      },
    ],
  },
  {
    label: 'Selective Distribution',
    link: '/protect/selective-distribution',
    subrows: [
      {
        label: 'Overview',
        link: '/protect/selective-distribution/overview',
      },
      {
        label: 'Not Authorized',
        link: '/protect/selective-distribution/not-authorized',
      },
      {
        label: 'In Progress',
        link: '/protect/selective-distribution/in-progress',
      },
      {
        label: 'Authorized & Not Compliant',
        link: '/protect/selective-distribution/not-compliant',
      },
      {
        label: 'Authorized',
        link: '/protect/selective-distribution/authorized',
      },
    ],
  },
]

const Template: Story = {
  render: function Render(args) {
    const isMobileView = useMediaQuery({ type: 'max', breakpoint: 'md' })
    const navigate = useNavigate()
    const { pathname } = useLocation()

    return isMobileView ? (
      <MobileRouterTabs {...args} navigate={navigate} currentPath={pathname} />
    ) : (
      <Alert
        text='Please check the mobile view by changing the preview viewport size in the Storybook actions bar above.'
        type='info'
      />
    )
  },
}

export const Mobile: Story = {
  ...Template,
  args: {
    mobileConfig: defaultMobileConfig,
  },
}