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

import Footer from '.';
import { sampleFooter } from '~tests/factories/sections/footer.factory';
import mlogo from '../../../../static/images/dmca.png';

export default {
  title: 'Theme/Molecules/Footer',
  component: Footer,
  argTypes: {
    section: {
      name: 'section',
      type: { name: 'object', required: false },
      defaultValue: null,
      description: 'Object with the footer section data.',
      table: {
        type: { summary: 'object' },
        defaultValue: { summary: null },
      },
    },
    footerLogos: {
      name: 'footerLogos',
      type: { name: 'string', required: false },
      defaultValue: null,
      description: 'Name of the footer logos object.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: null },
      },
    },
    footerMenu: {
      name: 'footerMenu',
      type: { name: 'string', required: false },
      defaultValue: null,
      description: 'Name of the footer menu object.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: null },
      },
    },
    copyrightDisclaimer: {
      name: 'copyrightDisclaimer',
      type: { name: 'string', required: false },
      defaultValue: null,
      description: 'Name of the copyright disclaimer.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: null },
      },
    },
    footerTopCustom: {
      name: 'footerTopCustom',
      type: { name: 'function', required: false },
      defaultValue: null,
      description:
        'Custom footer top component. Custom components could be anything from content to a newsletter subscription form.',
      table: {
        type: { summary: 'function' },
        defaultValue: { summary: null },
      },
    },
    footerBottomCustom: {
      name: 'footerBottomCustom',
      type: { name: 'function', required: false },
      defaultValue: null,
      description:
        'Custom footer bottom component. Custom components could be anything from content to a newsletter subscription form.',
      table: {
        type: { summary: 'function' },
        defaultValue: { summary: null },
      },
    },
    template: {
      name: 'template',
      type: { name: 'string', required: false },
      defaultValue: null,
      description:
        'The page template. This is used to check the page type. Some page types should hide footer links, for example the `ppc` page type.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: null },
      },
    },
    dmcaImage: {
      name: 'dmcaImage',
      type: { name: 'string', required: false },
      defaultValue: mlogo,
      description:
        'The page template. This is used to check the page type. Some page types should hide footer links, for example the `ppc` page type.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: mlogo },
      },
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          'Default footer in Gatsby theme. All data in this story is sample data. Any data can be added to the footer, including logos, links, custom components such as a newsletter subscription form, etc.',
      },
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

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

export const Default = Template.bind({});
Default.args = sampleFooter;
