// @flow
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { action } from '@storybook/addon-actions';
import { ContextMenu } from './context-menu.component';
import type { ContextMenuProps } from './context-menu.proptypes';
import { Box } from '../../../primitives/index';
import docs from './context-menu.mdx';

const items = [
  {
    id: 'login',
    label: <FormattedMessage id="Login as client" />,
    onSelect: action('Do login'),
  },
  {
    id: 'invite',
    label: <FormattedMessage id="Invite" />,
    onSelect: action('Do invite'),
  },
  {
    id: 'custom color',
    label: <FormattedMessage id="Custom Color" />,
    onSelect: action('Do invite'),
    textColorName: 'greyscale-medium',
  },
  {
    id: 'remove',
    label: <FormattedMessage id="Remove client" />,
    onSelect: action('Do Remove'),
    danger: true,
  },
];

export default {
  component: ContextMenu,
  title: 'Context Menu',
  parameters: {
    fileName: __filename,
    docs: {
      page: docs,
    },
  },
};

const DEFAULT_PROPS: ContextMenuProps = {
  justify: 'right',
  items,
  buttonLabel: 'open menu',
};

export const Default = () => (
  <Box
    colorName="background"
    spacing={['mb7', 'p7']}
    stacked="row"
    justify="center"
  >
    <ContextMenu {...DEFAULT_PROPS} />
  </Box>
);

export const Loading = () => (
  <Box
    colorName="background"
    spacing={['mb7', 'p7']}
    stacked="row"
    justify="center"
  >
    <ContextMenu {...DEFAULT_PROPS} isLoading />
  </Box>
);
