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

const operatorData = getSampleOperatorCards();

export default {
  title: 'Theme/Modules/Cards/Operator/Template Two',
  component: TemplateTwo,
  argTypes: {
    item: {
      name: 'item',
      type: { name: 'object', required: true },
      defaultValue: operatorData.items[0],
      description: 'item',
    },
    verifyIcon: {
      name: 'verifyIcon',
      type: { name: 'element', required: false },
      defaultValue: <Verify />,
      description: 'verify icon',
    },
    useOneStarRating: {
      name: 'useOneStarRating',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description: 'useOneStarRating',
    },
    page: {
      name: 'page',
      type: { name: 'object', required: false },
      defaultValue: { template: 'operator_review' },
      description: 'page template',
    },

    showBonusAsLink: {
      name: 'showBonusAsLink',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description: 'show Bonus as a Link?',
    },
    showTnc: {
      name: 'showTnc',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description: 'show tnc?',
    },
    tncCollapse: {
      name: 'tncCollapse',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description: 'is T&C collapsed? Will only work if showTnc is set to true',
    },
    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',
    },
    showPaymentMethods: {
      name: 'showPaymentMethods',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description: 'show payment methods?',
    },
    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 Two',
      },
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

const Template = (args) => (
  <div
    style={{
      maxWidth: ' 34.3rem',
      margin: '0 auto',
    }}
  >
    <TemplateTwo {...args} />
  </div>
);
export const Default = Template.bind({});
Default.args = {};
