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

import Tracker from '.';
// When we separate repo's we need to move these files to gatsby-theme
import bgVideoSrc from '../../../../../storybook-images/splash-page.webm';
import bgImageSrc from '../../../../../storybook-images/splash-page.svg';

export default {
  title: 'Theme/Pages/Tracker',
  component: Tracker,
  argTypes: {
    pageContext: {
      name: 'pageContext',
      type: { name: 'object', required: false },
      defaultValue: null,
      description: 'Object containing page context such as operator name and links.',
      table: {
        type: { summary: 'object' },
        defaultValue: { summary: null },
      },
    },
    path: {
      name: 'path',
      type: { name: 'string', required: false },
      defaultValue: null,
      description: 'Path of the page. For example `visit/casino-name/terms_and_conditions`.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: null },
      },
    },
    mainText: {
      name: 'mainText',
      type: { name: 'string', required: false },
      defaultValue: '',
      description: 'Main content of the page.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '' },
      },
    },
    redirectText: {
      name: 'redirectText',
      type: { name: 'string', required: false },
      defaultValue: '',
      description: 'Text to inform the user of the redirect.',
      table: {
        type: { summary: 'string | element' },
        defaultValue: { summary: '' },
      },
    },
    btnText: {
      name: 'btnText',
      type: { name: 'string', required: false },
      defaultValue: '',
      description: 'Text for the redirect button.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '' },
      },
    },
    bgImage: {
      name: 'bgImage',
      type: { name: 'string', required: false },
      defaultValue: '',
      description: 'Background image for the page.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '' },
      },
    },
    bgVideo: {
      name: 'bgVideo',
      type: { name: 'string', required: false },
      defaultValue: '',
      description:
        'Background video for the page. To use this, please also add a screenshot of the video as the bgImage prop. The screenshot will be a fallback for browsers which do not support `<video>`.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '' },
      },
    },
    redirectTimer: {
      name: 'redirectTimer',
      type: { name: 'number', required: false },
      defaultValue: 5000,
      description:
        'By default the page will redirect in 5 seconds. Change this property if you want the redirect to happen at a different time. Only related to the page redirect.',
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: 5000 },
      },
    },
    logo: {
      name: 'logo',
      type: { name: 'string', required: false },
      defaultValue: '../../../../../images/logo.svg',
      description: 'Site logo.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '../../../../../images/logo.svg' },
      },
    },
    counter: {
      name: 'counter',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description: 'If true, the redirect text will not be dangerouslySetInnerHTML.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    isStory: {
      name: 'isStory',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description:
        'If true, there will be no redirect. Used for storybook so that the page does not redirect.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
      control: {
        type: null,
      },
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          'A customizable splash page which redirects to a tracker link by default in 5 seconds.',
      },
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

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

export const Default = Template.bind({});
Default.args = {
  pageContext: {
    operator: {
      name: 'Rizk',
      short_name: 'rizk',
      status: 'active',
      links: {
        main: 'https://redirect.link.com',
        ppc: 'https://google.com',
      },
    },
  },
  path: 'visit/rizk/ppc',
  btnText: 'Redirect manually',
  mainText: "We're sending you to",
  redirectText: ' If you do not get redirected within <b>5</b> seconds',
  redirectTimer: 5000,
  logo: 'static/media/logo.b2fdcd1e.svg',
  counter: false,
  bgImage: bgImageSrc,
  bgVideo: bgVideoSrc,
  isStory: true,
};
