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

import Timeline from '~atoms/timeline';
import ContentAndCustomModule from '.';

export default {
  title: 'Theme/Molecules/Content And Custom Module',
  component: ContentAndCustomModule,
  argTypes: {
    content: {
      name: 'content',
      type: { name: 'string', required: false },
      defaultValue: '',
      description: 'HTML content.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '' },
      },
    },
    CustomComponent: {
      name: 'CustomComponent',
      type: { name: 'element', required: false },
      defaultValue: '',
      description: 'A custom component.',
      table: {
        type: { summary: 'element | any' },
        defaultValue: { summary: '' },
      },
      control: { type: null },
    },
    customComponentProps: {
      name: 'customComponentProps',
      type: { name: 'object', required: false },
      defaultValue: '',
      description: 'The custom component props.',
      table: {
        type: { summary: 'object' },
        defaultValue: { summary: '' },
      },
      control: { type: null },
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          'A component that accepts an array of objects and  html content, and  returns a div including a custom component and content box.',
      },
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

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

export const Default = Template.bind({});
Default.args = {
  content: `<h3>How we got to where we are today.</h3>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Gravida lectus feugiat tristique gravida in morbi. In viverra varius id eget quis hendrerit at augue. Id id nunc vitae suspendisse aliquet ut enim. Eleifend id dui blandit interdum.
    <br/><br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Gravida lectus feugiat tristique gravida in morbi. In viverra varius id eget quis hendrerit at augue. Id id nunc vitae suspendisse aliquet ut enim. Eleifend id dui blandit interdum.
  </p>
  <br/>
  <br/>
  <br/>
  <h3>We employ great writers with vast industry knowledge.</h3>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Gravida lectus feugiat tristique gravida in morbi. In viverra varius id eget quis hendrerit at augue. Id id nunc vitae suspendisse aliquet ut enim. Eleifend id dui blandit interdum.
  </p>`,
  CustomComponent: Timeline,
  customComponentProps: {
    items: [
      {
        date: '2013',
        title: 'Launched',
        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. At urna in sapien posuere leo imperdiet pulvinar dictum.',
        isActive: false,
      },
      {
        date: '2015',
        title: 'Rebrand + New Website',
        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. At urna in sapien posuere leo imperdiet pulvinar dictum.',
        isActive: false,
      },
      {
        date: '2017',
        title: '150+ Employees',
        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. At urna in sapien posuere leo imperdiet pulvinar dictum.',
        isActive: false,
      },
      {
        date: '2019',
        title: 'We acquired XXX',
        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. At urna in sapien posuere leo imperdiet pulvinar dictum.',
        isActive: false,
      },
      {
        date: 'Today',
        title: 'Over 500 Casino Reviews',
        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. At urna in sapien posuere leo imperdiet pulvinar dictum.',
        isActive: true,
      },
    ],
  },
};
