import React from 'react';
import { Meta, Story } from '@storybook/react';
import {
  OrganismGlobalHeader,
  IGlobalHeaderProps,
} from 'react/organisms/GlobalHeader';
const meta: Meta = {
  title: 'React/organisms/GlobalHeader',
  component: OrganismGlobalHeader,
  argTypes: {
    menuElements: {},
    isClosed: { table: { disable: true } },
    handleClickSingUp: { table: { disable: true } },
    handleClickLogin: { table: { disable: true } },
    handleClickUser: { table: { disable: true } },
    handleClickLogOut: { table: { disable: true } },
    handleTabOnClick: { table: { disable: true } },
    withHook: { table: { disable: true } },
    onClick: { table: { disable: true } },
    styles: { table: { disable: true } },
    type: { table: { disable: true } },
    handleClick: { table: { disable: true } },
    colorProgress: { table: { disable: true } },
  },
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const TemplateGlobalHeader: Story<IGlobalHeaderProps> = (props) => (
  <OrganismGlobalHeader {...props} />
);

const menuItems = [
  {
    id: '1',
    text: 'Earn Points',
    url: '/earn',
    nameIconLeft: 'points',
  },
  {
    id: '2',
    text: 'Rewards',
    url: '/rewards',
    nameIconLeft: 'rewards',
  },
  {
    id: '3',
    text: 'Offers',
    url: '/offer',
    nameIconLeft: 'offers',
  },
];

export const GlobalHeader = TemplateGlobalHeader.bind({});

GlobalHeader.args = {
  menuElements: menuItems,
  handleTabOnClick(selectedTab) {
    if (selectedTab) {
      const itemSelected = menuItems.filter((el) => el.id === selectedTab);
      console.log(itemSelected[0].url);
    }
  },
  handleClickUser(){
    console.log('go to user profile')
  },
  handleClickTierLevel(){
    console.log('tier level clicked')
  }
};
