import React from 'react';
import { Meta, Story } from '@storybook/react';
import { MoleculeTabMenu, ITabMenuProps } from 'native/molecules/TabMenu';
import { action } from '@storybook/addon-actions';
import { theme } from 'data/dataMx';
const meta: Meta = {
  title: 'React Native/molecules/TabMenu',
  component: MoleculeTabMenu,
  argTypes: {
    selectedColor: {
      control: {
        type: 'select'
      },
      options: Object.keys(theme),
    }
  },
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const TemplateTabMenu: Story<ITabMenuProps> = (props) => <MoleculeTabMenu {...props} />;

export const TabMenu = TemplateTabMenu.bind({});

TabMenu.args = {
  onTabSelected: action('Selected-Tab'),
  starterSelectedTab: 'Tab1',
  withFilter: false,
  onFilterClicked: action('Filter Clicked'),
  tabs: [
    {
      id: 'Tab1',
      text: 'Tab1',
      iconName: 'beer'
    },
    {
      id: 'Tab2',
      text: 'Tab2',
      iconName: 'beer'
    },
    {
      id: 'Tab3',
      text: 'Tab3',
      iconName: 'beer'
    },
    {
      id: 'Tab4',
      text: 'Tab4',
      iconName: 'beer'
    }
  ],
};