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

import { ASSETS_URL } from '../../consts/common';
import { UserInfo } from './user-info';
import type { UserInfoProps } from './types';

export default {
  component: UserInfo,
  title: 'Right Side Bar Components/User Settings',
  argTypes: {
    avatarProps: {
      description: 'Props to be supplied directly into the Avatar component.'
    },
    name: {
      description: 'Name to be displayed.'
    },
    userRole: {
      description: 'User role to be displayed.'
    },
    userEmail: {
      description: 'User email to be displayed.'
    },
    statusBadgeProps: {
      description:
        'Props to be supplied directly into the Badge component (set `color` prop to render status with badge dot).'
    },
    statusIcon: {
      description: 'Country flag icon to be placed before the status text.'
    },
    statusText: {
      description: 'User status text (usually the date of the last login or "Online").'
    }
  }
} as Meta;

const Template: Story<UserInfoProps> = args => <UserInfo {...args} />;

export const WithProfileImage = Template.bind({});
WithProfileImage.args = {
  name: 'Keanu Cook',
  userRole: 'Billing',
  userEmail: 'keanu@perimeter81.com',
  avatarProps: {
    src: 'https://i.pinimg.com/originals/e5/a9/e8/e5a9e877bcacdc5713d2a8f98412762d.png'
  },
  statusIcon: {
    src: `${ASSETS_URL}/flags/uk.svg`
  },
  statusText: 'Apr 22, 2021 8:12 AM'
};

export const WithCredentials = Template.bind({});
WithCredentials.args = {
  name: 'Dima Kordun',
  userRole: 'Administrator',
  userEmail: 'dima@perimeter81.com',
  avatarProps: {
    initials: 'DK',
    backgroundColor: '#CB5BCB'
  },
  statusBadgeProps: {
    color: 'primary'
  },
  statusIcon: {
    src: `${ASSETS_URL}/flags/italy.svg`,
    title: 'Italy'
  },
  statusText: 'Online'
};

export const WithOnlineAnimation = Template.bind({});
WithOnlineAnimation.args = {
  name: 'Mock User',
  userRole: 'Developer',
  userEmail: 'mock@fake.com',
  avatarProps: {
    src: 'https://upload.wikimedia.org/wikipedia/commons/8/8f/Cute-kittens-12929201-1600-1200.jpg'
  },
  statusBadgeProps: {
    color: 'secondary'
  },
  statusIcon: {
    'aria-label': 'Austria',
    src: `${ASSETS_URL}/flags/austria.svg`
  },
  statusText: 'Online'
};