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 copyIcon from '../../../../storybook-images/copyIcon.svg';
import checkIconSvg from '../../../../storybook-images/check-circle.svg';

import Coupon from '.';

export default {
  title: 'Theme/Atoms/Coupon',
  component: Coupon,
  argTypes: {
    code: {
      name: 'Coupon Code',
      type: 'String',
      defaultValue: 'Coupon-Code',
      description: 'Coupon Code of the operator',
    },
    status: {
      name: 'status',
      control: 'String',
      defaultValue: 'active',
      description: 'Operator status is active',
    },
    templateOne: {
      name: 'Template One',
      control: 'boolean',
      defaultValue: true,
      description: 'Template One',
    },
    showprefix: {
      name: 'showprefix',
      control: 'boolean',
      defaultValue: false,
      description: 'Show Text before coupon code',
    },
    showIcon: {
      name: 'showIcon',
      control: 'boolean',
      defaultValue: true,
      description: 'Show Icons',
    },
  },
  parameters: {
    docs: {
      description: {
        component: 'A component that displays Coupon',
      },
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

const Template = (args) => <Coupon {...args} />;
export const Default = Template.bind({});
Default.args = {
  icon: copyIcon,
  checkIcon: checkIconSvg,
};

export const TemplateTwo = Template.bind({});
TemplateTwo.args = {
  templateOne: false,
  icon: copyIcon,
  checkIcon: checkIconSvg,
  showprefix: true,
};
