/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import {
  Title,
  Description,
  Primary,
  PRIMARY_STORY,
  ArgsTable,
} from '@storybook/addon-docs/blocks';
import { getSampleOperatorCards } from 'gatsby-core-theme/tests/factories/modules/card.factory';
import verifyIcon from '../../../../../../storybook-images/verify.svg';
import TemplateFour from '.';
import styles from './template-four.module.scss';

const operatorData = getSampleOperatorCards();

export default {
  title: 'Theme/Modules/Cards/Operator/Template Four',
  component: TemplateFour,
  argTypes: {
    item: {
      name: 'item',
      type: { name: 'object', required: true },
      defaultValue: operatorData.items[0],
      description: 'item',
    },
    verifyIcon: {
      name: 'verifyIcon',
      type: { name: 'string', required: false },
      defaultValue: verifyIcon,
      description: 'verify icon',
    },
    page: {
      name: 'page',
      type: { name: 'object', required: false },
      defaultValue: { template: 'operator_review' },
      description: 'page template',
    },
    useOneStarRating: {
      name: 'useOneStarRating',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description: 'useOneStarRating',
    },
    showBonusAsLink: {
      name: 'showBonusAsLink',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description: 'show Bonus as a Link?',
    },
    showAuthor: {
      name: 'showAuthor',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description: 'show author?',
    },
    showRatingLabel: {
      name: 'showRatingLabel',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description: 'show rating label? Will only work if useOneStarRating is set to true',
    },
    showRatingDecimal: {
      name: 'showRatingDecimal',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description:
        'show decimal point for round numbers in ratings? Will only work if useOneStarRating is set to true',
    },
    showRibbon: {
      name: 'showRibbon',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description: 'show ribbon',
    },
    showBonusForAll: {
      name: 'showBonusForAll',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description:
        'When an operator is not active (i.e all statuses except active) show a hardcoded ribbon with operator status regardless of ribbons added on Hercules',
    },
  },
  parameters: {
    docs: {
      description: {
        component: 'A Default Footer Component - Template One',
      },
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

const Template = (args) => (
  <div className={styles.storybook}>
    <TemplateFour {...args} />
  </div>
);
export const Default = Template.bind({});
Default.args = {};
