import React from 'react';
import {
  Title,
  Description,
  Primary,
  PRIMARY_STORY,
  ArgsTable,
} from '@storybook/addon-docs/blocks';

import Link from '~hooks/link';
import styles from './tnc.module.scss';
import Tnc from '.';

const tncText = (
  <p>
    18+ New Players only. Play responsibly - 18+ New Players only. Play responsibly - 18+ New
    Players only. Play responsibly -
    <a href="https://www.begambleaware.org/" title="Gamble Aware" target="_blank" rel="noreferrer">
      &nbsp;Begambleaware
    </a>
    . Full
    <Link to="/terms-and-conditions">&nbsp;Terms&nbsp;</Link>
    Apply.
  </p>
);

export default {
  title: 'Theme/Molecules/Tnc',
  component: Tnc,
  argTypes: {
    hasCollapse: {
      name: 'hasCollapse',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description:
        'If true, the component will use the `<Collapse />` component and will show a dropdown for the T&C text.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: true },
      },
    },
    isFixed: {
      name: 'isFixed',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description:
        'If true, will have a fixed height for the T&C text. Will only work if hasCollapsed is set to false.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    onlyMobile: {
      name: 'onlyMobile',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description: 'Related to the `<Collapse />` component, if true, collapsible only on mobile.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: true },
      },
    },
    onlyDesktop: {
      name: 'onlyDesktop',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description: 'Related to the `<Collapse />` component, if true, collapsible only on desktop.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: true },
      },
    },
    buttonText: {
      name: 'buttonText',
      type: { name: 'string', required: false },
      defaultValue: 'Terms and Conditions Apply',
      description:
        'Related to the `<Collapse />` component, this is the text that will show when the collapse is closed.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'Terms and Conditions Apply' },
      },
    },
    initOpen: {
      name: 'initOpen',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description:
        'Related to the `<Collapse />` component, Is True, sets the box opened on first load.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    contentText: {
      name: 'contentText',
      type: { name: 'element', required: false },
      defaultValue: '18+ New Players only. Play responsibly.',
      description: 'The actual T&C text to display.',
      table: {
        type: { summary: 'string | element' },
        defaultValue: { summary: '' },
      },
    },
    operator: {
      name: 'operator',
      type: { name: 'object', required: false },
      defaultValue: null,
      description: 'The operator object, passed for the T&C link.',
      table: {
        type: { summary: 'object' },
        defaultValue: { summary: null },
      },
      control: {
        type: null,
      },
    },
  },
  parameters: {
    docs: {
      description: {
        component: 'A component to display T&C text and links. Optional collapse.',
      },
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

const Template = (args) => (
  <div className={styles.storybook}>
    <Tnc {...args} />
  </div>
);

export const Default = Template.bind({});
Default.args = {
  hasCollapse: true,
  contentText: tncText,
  onlyMobile: true,
  onlyDesktop: true,
  buttonText: 'Terms and Conditions Apply',
  initOpen: false,
  isFixed: false,
};
