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

import { DocsTemplate } from '../../../../.storybook'
import RouterTabs from './RouterTabs'

const meta: Meta<typeof RouterTabs> = {
  title: 'Components/Tabs/RouterTabs',
  component: RouterTabs,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-348&t=CdMnrLNv0lNFwXr0-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-348&t=CdMnrLNv0lNFwXr0-0'
          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 RouterTabs>

const CurrentPathName = () => {
  const { pathname } = useLocation()
  return pathname
}

const Template: Story = {
  render: (args) => {
    return (
      <RouterTabs {...args} currentPath={CurrentPathName()}>
        <NavLink to='/primary'>First</NavLink>
        <NavLink to='/second'>Second</NavLink>
        <NavLink to='/third'>Third</NavLink>
      </RouterTabs>
    )
  },
}

const mobileConfig = {
  mobileConfig: [
    {
      label: 'Link 1',
      link: '/link1-path',
    },
    {
      label: 'Link 2',
      link: '/link2-path',
      subrows: [
        {
          label: 'Sub Link 1',
          link: '/sublink1-path',
        },
        {
          label: 'Sub Link 2',
          link: '/sublink2-path',
        },
      ],
    },
  ],
}

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

export const SubTabs: Story = {
  ...Template,
  args: {
    subtabs: true,
    ...mobileConfig,
  },
}