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

import { ASSETS_URL } from '../../consts/common';
import { Header } from './header';
import type { HeaderProps } from './header';
import sidebarItemsMap from './__mocks__/mockHeader';
import Typography from '@mui/material/Typography';

export default {
  component: Header,
  title: 'Layout/Header/Primary Component',
  argTypes: {
    userControlsProps: {
      description: 'Props which will be passed into the user controls component'
    },
    breadcrumbsProps: {
      description: 'Props which will be passed into the breadcrumbs component'
    }
  }
} as Meta;

const Template: Story<HeaderProps> = args => <Header {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  userControlsProps: {
    name: 'Mock User',
    userRole: 'Developer',
    avatarProps: {
      src: 'https://upload.wikimedia.org/wikipedia/commons/8/8f/Cute-kittens-12929201-1600-1200.jpg'
    },
    notificationBadgeProps: {
      badgeContent: 4
    },
    showDividers: true,
    showIconSearch: false,
    showIconSettings: false,
    iconButtons: [
      {
        href: '/#',
        icon: {
          src: `${ASSETS_URL}/icons/icon_help.svg`
        },
        title: 'Need Help?'
      }
    ]
  },
  breadcrumbsProps: {
    sidebarItemsMap,
    pathname: '/cs/agent-rollout/rollout-logs'
  }
};

export const WithCustomContent: Story<HeaderProps> = args => <Header {...args} />;

WithCustomContent.args = {
  ContentComponent: () => <Typography color="textPrimary">I am a custom component!</Typography>
};