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

import Content from '.';
import { showMOreButton } from '~tests/factories/modules/content.factory';

export default {
  title: 'Theme/Modules/Content/Common/Text and Images/Show More Text',
  component: Content,
  argTypes: {
    module: {
      name: 'module',
      type: { name: 'object', required: false },
      defaultValue: '',
      description: 'The module data object',
      table: {
        type: { summary: 'object' },
        defaultValue: { summary: '' },
      },
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          'The content component displays content received from Hercules and replaces all images within the data with the lazy image component.',
      },
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

const TemplateContentImage = (args) => <Content {...args} />;

export const normal = TemplateContentImage.bind({});
normal.story = {
  args: {
    module: showMOreButton(),
  },
};

export const collapsible = TemplateContentImage.bind({});
collapsible.story = {
  parameters: {
    docs: {
      storyDescription:
        'In Hercules, clicking on an image in the content module will prompt several image alignment options. These include float right, float left, align right, align left and align center.',
    },
  },
  args: {
    isContentCollapsible: true,
    module: showMOreButton(
      'content_collapsible',
      '<div class="content"><h2>Content Section Heading</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Faucibus turpis in eu mi bibendum neque egestas. Fringilla urna porttitor rhoncus dolor purus non. Viverra nibh cras pulvinar mattis. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Mi bibendum neque egestas congue quisque egestas. Diam vulputate ut pharetra sit. Tortor pretium viverra suspendisse potenti nullam. Porta lorem mollis aliquam ut porttitor leo a. Sapien eget mi proin sed. Eget mi proin sed libero. Enim tortor at auctor urna nunc id. Nullam eget felis eget nunc. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui.</p>\n  <br>\n  <p>Sagittis nisl rhoncus mattis rhoncus. Maecenas accumsan lacus vel facilisis volutpat. Tristique sollicitudin nibh sit amet commodo. Odio facilisis mauris sit amet massa vitae tortor. Habitant morbi tristique senectus et netus et malesuada fames ac. Auctor elit sed vulputate mi sit amet. Id venenatis a condimentum vitae sapien pellentesque habitant morbi. Amet consectetur adipiscing elit ut aliquam purus sit amet. Sit amet mattis vulputate enim nulla aliquet porttitor. Urna molestie at elementum eu facilisis sed odio morbi. Sit amet mauris commodo quis imperdiet massa tincidunt. In fermentum posuere urna nec tincidunt praesent semper. Massa placerat duis ultricies lacus Read More</p>\n  </div>'
    ),
  },
};
