/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import {
  Title,
  Description,
  Primary,
  PRIMARY_STORY,
  ArgsTable,
} from '@storybook/addon-docs/blocks';
import { getExtraField } from 'gatsby-core-theme/src/helpers/getters';
import MainProvider from '~context/MainProvider';
import getFooterData from '../../../../../../tests/factories/modules/footer.factory';
import logo from '../../../../../../../storybook-images/logo.svg';
import dmca from '../../../../../../../storybook-images/dmca.png';
import securityIcon from '../../../../../../../storybook-images/security.svg';
import TemplateThree from '.';

const footerData = getFooterData();
const helpText = `
<p>
  Gambling can be addictive, please play responsibly.
  <br />
  If you are a problem gambler, please visit this
  <a
    href="https://www.begambleaware.org/"
    target="_blank"
    rel="nofollow"
    class="footer-gtm"
  >
    website
  </a>
  in order to get help.
</p>`;

const phoneNum = '- 89 241 5401';

export default {
  title: 'Theme/Layout/Footer/Template Three',
  component: TemplateThree,
  argTypes: {
    footerLogos: {
      name: 'footerLogos',
      type: { name: 'object', required: true },
      defaultValue: getExtraField(footerData?.extra_fields, 'logos'),
      description: 'footer logos',
    },
    footerMenu: {
      name: 'footerMenu',
      type: { name: 'object', required: true },
      defaultValue: getExtraField(footerData?.extra_fields, 'links'),
      description: 'footer menu',
    },
    copyrightDisclaimer: {
      name: 'copyrightDisclaimer',
      type: { name: 'string', required: true },
      defaultValue: getExtraField(footerData?.extra_fields, 'copyright_disclaimer'),
      description: 'copyright disclaimer',
    },
    showLinks: {
      name: 'showLinks',
      type: { name: 'boolean', required: true },
      defaultValue: true,
      description: 'show footer links?',
    },
    asSeenOn: {
      name: 'asSeenOn',
      type: { name: 'object', required: true },
      defaultValue: getExtraField(footerData?.extra_fields, 'as_seen_on'),
      description: 'footer as seen on logos',
    },
    gamblingText: {
      name: 'gamblingText',
      type: { name: 'object', required: true },
      defaultValue: getExtraField(footerData?.extra_fields, 'gambling_text'),
      description: 'Gambling Text',
    },
    socialIcons: {
      name: 'socialIcons',
      type: { name: 'object', required: true },
      defaultValue: getExtraField(footerData?.extra_fields, 'social_icons'),
      description: 'footer logos',
    },
    hasFooterLinks: {
      name: 'hasFooterLinks',
      type: { name: 'boolean', required: true },
      defaultValue: false,
      description: 'has footer links on mobile?',
    },
    hasDisclaimer: {
      name: 'hasDisclaimer',
      type: { name: 'boolean', required: true },
      defaultValue: true,
      description: 'has Disclaimer?',
    },
    showCopyright: {
      name: 'showCopyright',
      type: { name: 'boolean', required: true },
      defaultValue: true,
      description: 'show Copyright?',
    },
    helpText: {
      name: 'helpText',
      type: { name: 'string', required: true },
      defaultValue: helpText,
      description: 'helpText',
    },
    phoneNum: {
      name: 'phoneNum',
      type: { name: 'string', required: true },
      defaultValue: phoneNum,
      description: 'phone number',
    },
    logo: {
      name: 'logo',
      type: { name: 'string', required: true },
      defaultValue: logo,
      description: 'site logo',
    },
    dmcaImage: {
      name: 'dmcaImage',
      type: { name: 'string', required: true },
      defaultValue: dmca,
      description: 'site dmca image path',
    },
    dmcaWidth: {
      name: 'dmcaWidth',
      type: { name: 'number', required: true },
      defaultValue: 100,
      description: 'site dmca image width',
    },
    dmcaHeight: {
      name: 'dmcaImage',
      type: { name: 'number', required: true },
      defaultValue: 33,
      description: 'site dmca image height',
    },
    securityIcon: {
      name: 'securityIcon',
      type: { name: 'string', required: true },
      defaultValue: securityIcon,
      description: 'site security icon',
    },
  },
  parameters: {
    docs: {
      description: {
        component: 'A Default Footer Component - Template One',
      },
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

const Template = (args) => (
  <MainProvider
    value={{
      bannerIsActive: false,
      cookieAccepted: true,
      translations: {
        online_casino: 'Online Casino',
      },
    }}
  >
    <TemplateThree {...args} />
  </MainProvider>
);
export const Default = Template.bind({});
Default.args = {};
