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

import CookieConsent from '.';
import styles from './cookie-consent.module.scss';

export default {
  title: 'Theme/Organisms/Cookie Consent',
  component: CookieConsent,
  argTypes: {
    children: {
      name: 'children',
      type: { name: 'element', required: false },
      defaultValue: '',
      description: 'A component that contains the text content to show in the box.',
      table: {
        type: { summary: 'element | any' },
        defaultValue: { summary: '' },
      },
      control: {
        type: null,
      },
    },
    acceptText: {
      name: 'acceptText',
      type: { name: 'string', required: false },
      defaultValue: 'Accept',
      description: 'The accept button label.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'Accept' },
      },
    },
    declineText: {
      name: 'declineText',
      type: { name: 'string', required: false },
      defaultValue: '',
      description: 'The decline button label.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '' },
      },
    },
    declineURL: {
      name: 'declineURL',
      type: { name: 'string', required: false },
      defaultValue: '',
      description: 'Users will redirect to this URL if they click the decline button.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '' },
      },
    },
    location: {
      name: 'location',
      type: { name: 'string', required: false },
      defaultValue: 'bottom',
      description: 'to show the box on the top or bottom of the page.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'bottom' },
      },
      control: {
        type: 'inline-radio',
        options: ['top', 'bottom'],
      },
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          'A component that accepts a text and buttons options and generates an alert box on the top or bottom of the page for users to see and accept the cookie policy of the website.',
      },
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

const Template = (args) => (
  <div className={styles.cookieConsentStoryContainer}>
    <CookieConsent {...args}>
      <p>
        We use cookies in order to optimise our site and improve your experience with us. By using
        the site you consent to our
        <a href="/cookies" className="cookie-consent-gtm">
          {' '}
          &nbsp; Cookie Policy
        </a>
        .
      </p>
    </CookieConsent>
  </div>
);

export const Default = Template.bind({});
Default.args = {
  acceptText: 'Accept',
  declineText: '',
  declineURL: '#',
  location: 'bottom',
};
