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

import { ASSETS_URL } from '../../consts/common';
import { TableTextGroup } from './table-text-group';
import type { TableTextGroupProps } from './table-text-group';

export default {
  component: TableTextGroup,
  title: 'Table/In Cells/Login Status',
  argTypes: {
    title: {
      description: 'The title to be displayed.'
    },
    afterTitle: {
      description: 'The content to be displayed right after the title.'
    },
    subtitle: {
      description: 'The subtitle to be displayed.',
      table: {
        defaultValue: ''
      }
    },
    avatarProps: {
      description: 'Avatar props which will be passed to the avatar component.'
    },
    badgeProps: {
      description:
        'Props to be supplied directly into the Badge component (set `color` prop to render status with badge dot).'
    },
    truncateText: {
      description: 'Flag for truncating the text.'
    },
    className: {
      description: 'Custom class name in case you need to add custom styles to the component.'
    }
  }
} as Meta;

const Template: Story<TableTextGroupProps> = args => <TableTextGroup {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  title: 'Title',
  subtitle: 'Subtitle',
  avatarProps: {
    src: 'https://upload.wikimedia.org/wikipedia/commons/8/8f/Cute-kittens-12929201-1600-1200.jpg'
  }
};

export const UserInitials = Template.bind({});
UserInitials.args = {
  title: 'Name Surname',
  subtitle: 'Subtitle',
  avatarProps: {
    backgroundColor: '#6BB9D7',
    initials: 'NS',
    size: 'small'
  }
};

export const UserOffline = Template.bind({});
UserOffline.args = {
  title: 'Apr 22, 2021 8:12 AM',
  avatarProps: {
    'aria-label': 'Austria',
    size: 'small',
    src: `${ASSETS_URL}/flags/austria.svg`
  }
};

export const UserOnline = Template.bind({});
UserOnline.args = {
  title: 'Online',
  avatarProps: {
    'aria-label': 'Austria',
    size: 'small',
    src: `${ASSETS_URL}/flags/austria.svg`
  },
  badgeProps: {
    color: 'primary'
  }
};

export const UserOnline2 = Template.bind({});
UserOnline2.args = {
  title: 'Online',
  avatarProps: {
    'aria-label': 'Austria',
    size: 'small',
    src: `${ASSETS_URL}/flags/austria.svg`
  },
  badgeProps: {
    color: 'secondary'
  }
};