import { action } from '@storybook/addon-actions';
import { select, text } from '@storybook/addon-knobs';
import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';

import AvatarView from '../avatarView';
import { ProfileType } from '../common';
import Logo from '../logo';

import OverlayHeader from './OverlayHeader';

export default {
  component: OverlayHeader,
  title: 'Navigation/OverlayHeader',
};

const avatarProfiles = {
  '': null,
  Business: <BriefcaseIcon size="24" />,
  Profile: <ProfileIcon size="24" />,
};

export const Basic = () => {
  const showAvatar = select(
    'avatar',
    Object.keys(avatarProfiles) as (keyof typeof avatarProfiles)[],
    'Profile',
  );
  return (
    <OverlayHeader
      logo={<Logo />}
      avatar={<AvatarView>{avatarProfiles[showAvatar]}</AvatarView>}
      onClose={action('Close clicked')}
    />
  );
};

export const WithAvatarWrapper = () => {
  const avatarURL = text(
    'avatarURL',
    'https://wise.com/web-art/assets/illustrations/heart-small@2x.webp',
  );
  const profileType = select(
    'profileType',
    [ProfileType.PERSONAL, ProfileType.BUSINESS],
    undefined,
  );
  return (
    <OverlayHeader
      logo={<Logo />}
      avatar={<AvatarView imgSrc={avatarURL} type={profileType?.toLowerCase()} />}
      onClose={action('Close clicked')}
    />
  );
};
