import type { Meta, StoryObj } from '@storybook/react-webpack5';
import { action } from 'storybook/actions';
import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';
import AvatarView from '../avatarView';
import { ProfileType } from '../common';
import Logo from '../logo';

import OverlayHeader, { OverlayHeaderProps } from './OverlayHeader';

interface CustomControls {
  avatarType?: keyof typeof avatarProfiles;
  avatarURL?: string;
  profileType?: ProfileType;
}
export type StoryArgs = OverlayHeaderProps & CustomControls;

const meta: Meta<StoryArgs> = {
  component: OverlayHeader,
  title: 'Navigation/OverlayHeader',
  argTypes: {
    avatarType: { control: 'select', options: ['', 'Business', 'Profile'] },
    avatarURL: { control: 'text' },
    profileType: { control: 'select', options: [ProfileType.PERSONAL, ProfileType.BUSINESS] },
  },
};
export default meta;

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

export const Basic: StoryObj<StoryArgs> = {
  render: (args) => (
    <OverlayHeader
      logo={<Logo />}
      avatar={<AvatarView>{avatarProfiles[args.avatarType ?? '']}</AvatarView>}
      onClose={action('Close clicked')}
    />
  ),
  args: {
    avatarType: 'Profile',
  },
};

export const WithAvatarWrapper: StoryObj<StoryArgs> = {
  render: (args) => (
    <OverlayHeader
      logo={<Logo />}
      avatar={<AvatarView imgSrc={args.avatarURL} profileType={args.profileType} />}
      onClose={action('Close clicked')}
    />
  ),
  args: {
    avatarURL: '../tapestry-01.png',
    profileType: ProfileType.PERSONAL,
  },
};