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

import { DocsTemplate } from '../../../.storybook'
import PaginationComponent from './Pagination'
import { toast } from '../Toast/Toast'

const meta: Meta<typeof PaginationComponent> = {
  title: 'Components/Pagination',
  component: PaginationComponent,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>Pagination</code> component facilitates the navigation
              and display of paginated data. It allows users to view the first
              and last pages at all times, with navigation buttons on either end
              to increment or decrement the page number. The pages in between
              are represented by an ellipsis button, which is clickable and
              reveals the hidden pages, providing a convenient way to navigate
              through large datasets.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Implement the <code>Pagination</code> component when paginating
              through a dataset to enhance user navigation and experience.
            </span>,
            <span key='second-bullet'>
              Direction from UX must be taken before implementing because this
              component could be used along with infinite scroll or without it.
            </span>,
          ]}
        />
      ),
    },
  },
}
export default meta

const Pagination = (args) => {
  return (
    <div style={{ height: '75px' }}>
      <div
        className='flex items-center justify-center'
        style={{
          position: 'fixed',
          bottom: 0,
          left: 0,
          right: 0,
          height: '75px',
        }}
      >
        <PaginationComponent {...args} />
      </div>
    </div>
  )
}

type Story = StoryObj<typeof PaginationComponent>

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

const toastCallout = (page) => {
  toastify.dismiss()
  toast({
    message: `Page was changed to ${page.toLocaleString()}`,
    type: 'success',
  })
}

export const FewPages: Story = {
  ...Template,
  args: {
    totalPages: 5,
    callout: (page) => toastCallout(page),
    currentPage: 1,
  },
}

export const ManyPages: Story = {
  ...Template,
  args: {
    totalPages: 100,
    callout: (page) => toastCallout(page),
    currentPage: 1,
  },
}

export const CurrentPage: Story = {
  ...Template,
  args: {
    totalPages: 100,
    callout: (page) => toastCallout(page),
    currentPage: 50,
  },
}