/* 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 '~images/icons/verify';
import TemplateOne from '.';

const operatorData = getSampleOperatorCards();

export default {
  title: 'Theme/Modules/Cards/Operator/Template One',
  component: TemplateOne,
  argTypes: {
    item: {
      name: 'item',
      type: { name: 'object', required: true },
      defaultValue: operatorData.items[0],
      description: 'item',
    },
    tncFixed: {
      name: 'tncFixed',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description:
        'is T&C has fixed height? Will only work if showTnc is set to true and tncCollapse is set to false',
    },
    verifyIcon: {
      name: 'verifyIcon',
      type: { name: 'element', 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?',
    },
    showPaymentMethods: {
      name: 'showPaymentMethods',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description: 'show payment methods?',
    },
    showSellingPoints: {
      name: 'showSellingPoints',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description: 'show selling points?',
    },
    showAuthor: {
      name: 'showAuthorImage',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description: 'show author?',
    },
    showAuthorName: {
      name: 'showAuthorName',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description: 'show author?',
    },
    hasVariableComponent: {
      name: 'hasVariableComponent',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description:
        'if needs to show extra details, display them on a separate component at site level',
    },
    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',
    },
    authorTemplateTwo: {
      name: 'authorTemplateTwo',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description: 'Specify which author template to use',
    },
    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
    style={{
      maxWidth: ' 34.3rem',
      margin: '0 auto',
    }}
  >
    <TemplateOne {...args} />
  </div>
);
export const Default = Template.bind({});
Default.args = {};
