import React from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import {
  Title,
  Description,
  Primary,
  PRIMARY_STORY,
  ArgsTable,
} from '@storybook/addon-docs/blocks';
import { IoMdArrowRoundForward } from '@react-icons/all-files/io/IoMdArrowRoundForward';

import OperatorCtaButton from './operator-cta';

export default {
  title: 'Theme/Atoms/Button2',
  component: OperatorCtaButton,
  argTypes: {
    operator: {
      name: 'operator',
      type: { name: 'object', required: true },
      defaultValue: {
        status: 'active',
        links: {
          main: 'https://icepromo.info/l/6231e62994b436028e219a05',
          operator_review: 'https://icepromo.info/l/6231e62994b436028e219a05',
        },
      },
      description: 'The operator data object.',
    },
    pageTemplate: {
      name: 'PageTemplate',
      type: { name: 'string' },
      defaultValue: 'operator_review',
      description: 'Page Template',
    },
    gtmClass: {
      name: 'gtmClass',
      type: { name: 'string' },
      defaultValue: '',
      description: 'Gtm class',
    },
    buttonType: {
      name: 'buttonType',
      options: ['primary', 'secondary', 'tertiary'],
      control: { type: 'radio' },
    },
    buttonSize: {
      name: 'buttonType',
      options: ['xs', 's', 'm', 'l', 'xl', 'noSize'],
      control: { type: 'radio' },
    },
    tracker: {
      name: 'tracker',
      type: { name: 'string' },
      defaultValue: 'main',
      description: 'Tracker',
    },
    disable: {
      name: 'disable',
      type: { name: 'string' },
      defaultValue: '',
      description: 'disable button style',
    },
    icon: {
      name: 'Icon',
      defaultValue: <IoMdArrowRoundForward />,
    },
    translationsObj: {
      name: 'translationsObj',
      type: { name: 'object' },
      defaultValue: {
        active: { translationKey: 'play_now', defaultValue: 'Visit' },
        not_recommended: { translationKey: 'not_recommended', defaultValue: 'Not Recommended' },
        coming_soon: { translationKey: 'coming_soon', defaultValue: 'Soon Available' },
        inactive: { translationKey: 'inactive', defaultValue: 'Not Accepting New Players' },
        blacklisted: { translationKey: 'blacklisted', defaultValue: 'Blacklisted' },
      },
    },
  },
  parameters: {
    docs: {
      description: {
        component: 'A component that accepts the operator data and returns a CTA button.',
      },
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

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

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