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

const meta: Meta = {
  title: 'Components/Tooltip',
  component: Tooltip,
  parameters: {
    docs: {
      description: {
        component: description,
      },
    },
  },
  argTypes: {
    children: {
      table: {
        disable: true,
      },
    },
    innerRef: {
      table: {
        disable: true,
      },
    },
    triggerSelector: {
      table: {
        disable: true,
      },
    },
    className: {
      type: 'string',
    },
    placement: {
      control: {
        type: 'select',
        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<TooltipProps> = (args) => (
  <div className="text-center p-60">
    <Button label="Button" color="blue" id="tooltip-trigger">
      Hover Me
    </Button>
    <Tooltip {...args}>Tooltip</Tooltip>
  </div>
);

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

Default.args = {
  triggerSelector: '#tooltip-trigger',
};