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

import Sticky from '.';
import styles from './sticky.module.scss';

export default {
  title: 'Theme/Molecules/Sticky',
  component: Sticky,
  argTypes: {
    children: {
      name: 'children',
      type: { name: 'element', required: false },
      defaultValue: '',
      description: 'A component to be placed as fixed.',
      table: {
        type: { summary: 'element | any' },
        defaultValue: { summary: '' },
      },
      control: {
        type: null,
      },
    },
    className: {
      name: 'className',
      type: { name: 'string', required: false },
      defaultValue: '',
      description: 'Add another class for additional styling.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '' },
      },
    },
    position: {
      name: 'position',
      type: { name: 'string', required: false },
      defaultValue: 'bottom',
      description: 'to show the box on the top or bottom of the page.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'bottom' },
      },
      control: {
        type: 'inline-radio',
        options: ['top', 'bottom'],
      },
    },
    showOnScroll: {
      name: 'showOnScroll',
      type: { name: 'boolean', required: false },
      defaultValue: true,
      description: 'Show fixed element if page is scrolled.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: true },
      },
    },
    fullWidth: {
      name: 'fullWidth',
      type: { name: 'boolean', required: false },
      defaultValue: false,
      description: 'The fixed element takes full width of the page if set to true.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          'A component that styles its child ( a given component ) into a fixed element on the browser page.',
      },
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

const Template = (args) => (
  <div className={styles.stickyStoryContainer}>
    <Sticky {...args}>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua.
      </p>
    </Sticky>
  </div>
);

export const Default = Template.bind({});
Default.args = {
  showOnScroll: false,
};
