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

import { SidebarRight } from './sidebar-right';
import type { SidebarRightProps } from './types';
import mockData, { mockUserOnline } from './__mocks__/mockSidebarRight';

export default {
  component: SidebarRight,
  title: 'Deprecated/Templates/Verified/SidebarRight',
  argTypes: {
    renderCompact: {
      description: 'Whether to render iconInfoItems in a compact design (without wrapping) or not.',
      table: {
        defaultValue: {
          summary: false
        }
      }
    },
    userInfoProps: {
      description: 'UserInfo to display.'
    },
    iconInfoItems: {
      description: 'IconInfoItems to display.'
    },
    iconListItems: {
      description: 'IconListItems to display.'
    },
    classes: {
      description: 'Provide to override classes.'
    }
  }
} as Meta;

const multilineTooltipExample = {
  title: (
    <span style={{ whiteSpace: 'pre-line' }}>
      {['LAPTOP-QIILQRC7', 'Ariel’s MacBook Pro', 'Dima Android Oneplus6'].join('\n')}
    </span>
  )
};

const Template: Story<SidebarRightProps> = args => {
  return (
    <div style={{ maxWidth: 320 }}>
      <SidebarRight {...args} />
    </div>
  );
};

export const Primary = Template.bind({});
Primary.args = {
  ...mockData,
  // mutate tooltip of the very first iconInfoItem
  iconInfoItems: mockData?.iconInfoItems?.map((iconInfoItem, index) => {
    if (index === 0) iconInfoItem.tooltipProps = multilineTooltipExample;
    return iconInfoItem;
  })
};

export const UserOnline = Template.bind({});
UserOnline.args = {
  ...mockUserOnline
};