import React from 'react';
import { Meta, Story } from '@storybook/react';
import { Button, Popover } from '../../index';
import description from './Popover.md';
import { PopoverProps } from './Popover';

const meta: Meta = {
  title: 'Components/Popover',
  component: Popover,
  parameters: {
    docs: {
      description: {
        component: description,
      },
    },
  },
  argTypes: {
    children: {
      table: {
        disable: true,
      },
    },
    innerRef: {
      table: {
        disable: true,
      },
    },
    triggerSelector: {
      table: {
        disable: true,
      },
    },
    className: {
      type: 'string',
    },
    arrow: {
      type: 'boolean',
    },
    placement: {
      control: {
        type: 'select',
        // todo: see if we can grab these values directly from popper
        options: [
          'auto',
          'auto-start',
          'auto-end',
          'top',
          'top-start',
          'top-end',
          'bottom',
          'bottom-start',
          'bottom-end',
          'right',
          'right-start',
          'right-end',
          'left',
          'left-start',
          'left-end',
        ],
      },
    },
    strategy: {
      control: {
        type: 'select',
        options: ['absolute', 'fixed'],
      },
    },
  },
};

export default meta;

const Template: Story<PopoverProps> = (args) => (
  <div className="text-center">
    <Button color="blue" id="popover" label="click" className="my-60">
      Click
    </Button>
    <Popover {...args}>Popover content goes here</Popover>
  </div>
);

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

Default.args = {
  triggerSelector: '#popover',
};