import React from 'react';
import {
  Title,
  Description,
  Primary,
  PRIMARY_STORY,
  ArgsTable,
} from '@storybook/addon-docs/blocks';
import { FaRegThumbsUp } from '@react-icons/all-files/fa/FaRegThumbsUp';
import { FaRegThumbsDown } from '@react-icons/all-files/fa/FaRegThumbsDown';

import { MdCheck } from '@react-icons/all-files/md/MdCheck';
import { MdClose } from '@react-icons/all-files/md/MdClose';

import ProsCons from '.';

const iconsSvg = [
  <FaRegThumbsUp size="50" />,
  <FaRegThumbsDown size="50" />,
  <MdCheck size="25" color="#17d670" />,
  <MdClose size="25" color="#e81111" />,
];

export default {
  title: 'Theme/Molecules/Pros and Cons',
  component: ProsCons,
  argTypes: {
    module: {
      name: 'module',
      type: { name: 'object', required: false },
      defaultValue: '',
      description: 'The module data object',
      table: {
        type: { summary: 'object' },
        defaultValue: { summary: '' },
      },
    },
    pros: {
      name: 'pros',
      type: { name: 'string', required: false },
      defaultValue: 'Pros',
      description: 'Title for the pros',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'Pros' },
      },
    },
    cons: {
      name: 'cons',
      type: { name: 'string', required: false },
      defaultValue: 'Cons',
      description: 'Title for the cons',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'Cons' },
      },
    },
    icons: {
      name: 'icons',
      type: { name: 'array', required: false },
      defaultValue: null,
      description:
        'Array of icons used in the component. In order of pros title icon, pros list items icon, cons title icon, cons list items icon.',
      table: {
        type: { summary: 'array' },
        defaultValue: { summary: null },
      },
      control: null,
    },
  },
  parameters: {
    docs: {
      description: {
        component: 'A component that shows a list of pros and cons and corresponding icons.',
      },
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

const Template = (args) => <ProsCons {...args} />;

export const Default = Template.bind({});
Default.args = {
  module: {
    pros: ['User friendly interface', 'Competitive odds', 'Awesome Bonuses', 'Live chat feature'],
    cons: ['Bonus limitations for some countries', 'Limited promotional offers and bonuses'],
  },
  pros: 'Pros',
  cons: 'Cons',
  icons: iconsSvg,
};
