import type { Meta, StoryObj } from '@storybook/react-webpack5';
import { action } from 'storybook/actions';
import { Person, Briefcase as BriefcaseIcon } from '@transferwise/icons';
import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
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;

/**
 * @deprecated Use `FlowNavigation` component instead
 */
const meta: Meta<StoryArgs> = {
  component: OverlayHeader,
  title: 'Navigation/OverlayHeader',
  tags: ['deprecated'],
  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: <Person size="24" />,
};

export const Sandbox = createSandboxStory({
  code: `<OverlayHeader
  avatar={<AvatarView profileType={ProfileType.BUSINESS} />}
  logo={<Logo />}
  onClose={() => console.log('Close clicked')}
/>`,
  scope: globalScope,
});

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,
  },
};
