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

import { getSingleToplistWithTemplate } from '../../../../tests/factories/modules/toplist.factory';
import RecommendedOperators from '.';

const operators = getSingleToplistWithTemplate();

export default {
  title: 'Theme/Modules/Template Blocks/Calculators/Recommended Casinos',
  component: RecommendedOperators,
  argTypes: {
    operators: {
      name: 'operators',
      type: { name: 'object', required: true },
      defaultValue: operators?.items[0]?.items,
      description: 'List of operators',
      table: {
        type: { summary: 'object' },
        defaultValue: { summary: null },
      },
    },
    title: {
      name: 'title',
      type: { name: 'string', required: false },
      defaultValue: 'Recommended Casinos:',
      description:
        'Title for the module',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'Recommeded Casinos for you: ' },
      },
    },
    buttonType: {
      name: 'buttonType',
      type: { name: 'string', required: false },
      defaultValue: 'primary',
      description:
        'type of button to be used',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'Primary' },
      },
      control: {
        type: 'inline-radio',
        options: ['primary', 'secondary', 'tertiary',],
      },
    },
    showCouponCode: {
      name: 'showCouponCode',
      type: { name: 'boolean', required: false },
      defaultValue: false,
    },
    showRating: {
      name: 'showRating',
      type: { name: 'boolean', required: false },
      defaultValue: false,
    },
    showAuthor: {
      name: 'showAuthor',
      type: { name: 'boolean', required: false },
      defaultValue: false,
    },
    tncFixed: {
      name: 'tncFixed',
      type: { name: 'boolean', required: false },
      defaultValue: false,
    },
    operatorLogoWidth: {
      name: 'operatorLogoWidth',
      type: { name: 'number', required: false },
      defaultValue: 96,
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: null },
      },
    },
    operatorLogoHeight: {
      name: 'operatorLogoHeight',
      type: { name: 'number', required: false },
      defaultValue: 96,
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: null },
      },
    },
  },
  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 Template = (args) => <RecommendedOperators {...args} />;

export const Default = Template.bind({});
Default.args = {};