/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import {
  Title,
  Description,
  Primary,
  Stories,
  PRIMARY_STORY,
  ArgsTable,
} from '@storybook/addon-docs/blocks';

import VerifiedAuthor from '../../../../images/icons/verified-author';
import { getSingleToplistWithTemplate } from '../../../../../tests/factories/modules/toplist.factory';
import Toplist from '.';

export default {
  title: 'Theme/Modules/Toplist/Layout',
  component: Toplist,
  argTypes: {
    module: {
      name: 'module',
      type: { name: 'object', required: false },
      defaultValue: '',
      description: 'The toplist items passed to make a toplist or multi-toplist.',
      table: {
        type: { summary: 'object' },
        defaultValue: { summary: null },
      },
    },
    toplistHeading: {
      name: 'toplistHeading',
      type: { name: 'element', required: false },
      defaultValue: null,
      description:
        'An element containing headings for the toplist (Check Theme > Modules > Toplist > Row > Variant One for example).',
      table: {
        type: { summary: 'element' },
        defaultValue: { summary: null },
      },
      control: { type: null },
    },
    page: {
      name: 'page',
      type: { name: 'object', required: false },
      defaultValue: { template: 'operator_review', path: '/to-page' },
      description: 'The page object.',
    },
    isHomepageFirstModule: {
      name: 'isHomepageFirstModule',
      type: { name: 'boolean', required: false },
      defaultValue: false,
    },
    verifyIcon: {
      name: 'verifyIcon',
      type: { name: 'element', required: false },
      defaultValue: <VerifiedAuthor />,
      description: 'Send in a custom verify icon to toplist',
      table: {
        type: { summary: 'element' },
        defaultValue: { summary: <VerifiedAuthor /> },
      },
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          'List of casinos typically displaying bonus information, unique selling points and a CTA. Depending on the data received from Hercules, the toplist will display as a multi-toplist with tabs, single toplist, and/or with a load more button. The toplist rows are customizable, reusable and can even be displayed in grid style rather than rows.',
      },
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <Stories />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

const ToplistTemplateOne = (args) => <Toplist {...args} />;
const ToplistTemplateTwo = (args) => <Toplist {...args} />;
const ToplistTemplateThree = (args) => <Toplist {...args} />;

export const TemplateOne = ToplistTemplateOne.bind({});
TemplateOne.args = {
  module: getSingleToplistWithTemplate(),
};

export const TemplateTwo = ToplistTemplateTwo.bind({});
TemplateTwo.args = {
  module: getSingleToplistWithTemplate('template_two'),
};

export const TemplateThree = ToplistTemplateThree.bind({});
TemplateThree.args = {
  module: getSingleToplistWithTemplate('template_three'),
};
