import { ComponentStory, ComponentMeta } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import type { AvatarProps } from '../../../avatar';
import type { CardGridActionIcon, CardGridProps } from '../types';
import CardGrid from '../card-grid';
import { mockGroupsCards } from '../__mocks__/mockGroupsCards';
import { mockIntegrationsCards } from '../__mocks__/mockIntegrationsCards';

export default {
  title: 'Cards/Card Grid',
  component: CardGrid,
  argTypes: {
    cols: {
      description: 'Card grid columns definitions.',
      control: {
        type: 'array'
      }
    },
    rows: {
      description: 'Card grid row definitions.',
      control: {
        type: 'array'
      }
    }
  }
} as ComponentMeta<typeof CardGrid>;

const actionClickHandler: CardGridActionIcon['onClick'] = value =>
  action(`${value} action clicked`);
const cardClickHandler = action('card clicked');
const cardKeyDownHandler = action('key pressed');
const cellClickHandler: CardGridProps['onCellClick'] = (e, props) => {
  e.stopPropagation();
  action(`${props?.field} cell clicked`)(e);
};
const counterClickHandler: AvatarProps['onClick'] = e => {
  e.stopPropagation();
  action('counter clicked')(e);
};

const Template: ComponentStory<typeof CardGrid> = args => <CardGrid {...args} />;

export const Groups = Template.bind({});
Groups.args = {
  ...mockGroupsCards({
    onActionClick: actionClickHandler,
    onCounterClick: counterClickHandler
  }),
  onCellClick: cellClickHandler,
  onClick: cardClickHandler,
  onKeyDown: cardKeyDownHandler
};

export const Integrations = Template.bind({});
Integrations.args = {
  ...mockIntegrationsCards({
    onActionClick: actionClickHandler
  }),
  onCellClick: cellClickHandler,
  onClick: cardClickHandler,
  onKeyDown: cardKeyDownHandler
};