/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import {
  Title,
  Description,
  Primary,
  PRIMARY_STORY,
  ArgsTable,
} from '@storybook/addon-docs/blocks';
import { MdLastPage } from '@react-icons/all-files/md/MdLastPage';
import { MdFirstPage } from '@react-icons/all-files/md/MdFirstPage';
import { MdChevronRight } from '@react-icons/all-files/md/MdChevronRight';
import { MdChevronLeft } from '@react-icons/all-files/md/MdChevronLeft';
import Pagination from '.';

export default {
  title: 'Theme/Molecules/Pagination',
  component: Pagination,
  argTypes: {
    currentPage: {
      name: 'currentPage',
      type: { name: 'number', required: true },
      defaultValue: 1,
      description: 'The current page number.',
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: 1 },
      },
      control: { type: 'number', min: 1 },
    },
    totalPages: {
      name: 'totalPages',
      type: { name: 'number', required: true },
      defaultValue: '',
      description: 'The total page number.',
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: '' },
      },
      control: { type: 'number', min: 1 },
    },
    pagePath: {
      name: 'pagePath',
      type: { name: 'string', required: true },
      defaultValue: '#',
      description: 'The page path.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '#' },
      },
    },
    previousComp: {
      name: 'previousComp',
      type: { name: '', required: false },
      defaultValue: <MdChevronLeft />,
      description: 'The previous page button icon component.',
      table: {
        type: { summary: 'element | any' },
        defaultValue: { summary: '<MdChevronLeft/>' },
      },
      control: null,
    },
    nextComp: {
      name: 'nextComp',
      type: { name: '', required: false },
      defaultValue: <MdChevronRight />,
      description: 'The next page button icon component.',
      table: {
        type: { summary: 'element | any' },
        defaultValue: { summary: '<MdChevronRight/>' },
      },
      control: null,
    },
    firstComp: {
      name: 'firstComp',
      type: { name: '', required: false },
      defaultValue: <MdFirstPage />,
      description: 'The first page button icon component.',
      table: {
        type: { summary: 'element | any' },
        defaultValue: { summary: '<MdFirstPage/>' },
      },
      control: null,
    },
    lastComp: {
      name: 'lastComp',
      type: { name: '', required: false },
      defaultValue: <MdLastPage />,
      description: 'The last page button icon component.',
      table: {
        type: { summary: 'element | any' },
        defaultValue: { summary: '<MdLastPage/>' },
      },
      control: null,
    },
    anchorLabel: {
      name: 'anchorLabel',
      type: { name: 'string' },
      defaultValue: '',
      description: 'Label for Anchor',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '' },
      },
    },
    pageNeighbours: {
      name: 'pageNeighbours',
      type: { name: 'number' },
      defaultValue: 1,
      description:
        'page numbers beside the current page on each side. Default is to have 1 on each side',
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: 1 },
      },
      control: { type: 'number', min: 1 },
    },
    showFirstLast: {
      name: 'showFirstLast',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description: 'Show First and Last page arrow buttons',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    showPrevNext: {
      name: 'showPrevNext',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description: 'Show Previous and Next arrow buttons',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: true },
      },
    },
    showOf: {
      name: 'showOf',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description: 'show page numbers as [current page] of [total pages] instead of with midpoints',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    hidePrevious: {
      name: 'hidePrevious',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description: 'Hide Previous page number',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    hideNext: {
      name: 'hideNext',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description: 'Hide Next page number',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          'A component that accepts the number of pages and the current page number and other options and generates pages navigation that will use in the archive pages..',
      },
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

const Template = (args) => <Pagination {...args} />;
export const Default = Template.bind({});
Default.args = {
  currentPage: 40,
  pagePath: 'example',
  totalPages: 60,
};
