import { Story, Meta } from '@storybook/react';

import { ASSETS_URL } from '../../consts/common';
import { Member } from './member';
import type { MemberProps } from './member';

export default {
  component: Member,
  title: 'Table/In Cells/User Name',
  argTypes: {
    fullName: {
      description: 'Will be used as title.'
    },
    description: {
      description: 'Will be used as subtitle.'
    },
    label: {
      description: 'Any react component to be used as a label/tag.'
    },
    avatarProps: {
      description: 'Props which will be passed into the avatar component.'
    },
    icons: {
      description: 'Array of icons which should have click handlers.'
    },
    avatarTooltipText: {
      description: 'Tooltip text for avatar component.'
    },
    showAvatarTooltip: {
      description: 'Flag for showing of the tooltip on the avatar component.'
    }
  }
} as Meta;

const Template: Story<MemberProps> = args => <Member {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  fullName: 'Full name',
  description: 'description@email.com',
  avatarProps: {
    initials: 'JS',
    backgroundColor: '#6BB9D7'
  },
  avatarTooltipText: 'avatar Tooltip Text'
};

export const WithLabelAndIcons = Template.bind({});
WithLabelAndIcons.args = {
  ...Primary.args,
  label: <div>Label component</div>,
  icons: [
    {
      src: `${ASSETS_URL}/icons/icon_mail.svg`,
      clickHandler: () => alert('Send mail')
    },
    {
      src: `${ASSETS_URL}/icons/icon_phone.svg`,
      clickHandler: () => alert('Phone function')
    }
  ]
};