import React from 'react';
import {Meta, StoryObj} from '@storybook/react';
import Slot from '@components/_HuGo/Slot';

import {Menu} from './index';

const meta: Meta<typeof Menu> = {
  title: 'HuGo/Menu',
  component: Menu,
  argTypes: {
    isVisible: {control: 'boolean'},
    withDivider: {control: 'boolean'},
    title: {control: 'text'},
  },
};

type Story = StoryObj<typeof Menu>;

const renderItem = () => <Slot />;

const COMMON_PROPS = {
  isVisible: false,
  title: 'I am a title from Menu',
  data: [{id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}],
  withDivider: false,
  renderItem,
};

export const MenuComponent: Story = {
  args: COMMON_PROPS,
};

export const MenuWithFooterComponent: Story = {
  args: {
    footer: {
      primaryButton: {text: 'Button 1', onPress: () => null},
      secondaryButton: {text: 'Button 2', onPress: () => null},
      infoText: 'Additional Text',
    },
    ...COMMON_PROPS,
  },
};

export const MenuCanGoBackComponent: Story = {
  args: {
    ...COMMON_PROPS,
    onGoBack: () => null,
  },
};

export const MenuFullComponent: Story = {
  args: {
    footer: {
      primaryButton: {text: 'Button 1', onPress: () => null},
      secondaryButton: {text: 'Button 2', onPress: () => null},
      infoText: 'Additional Text',
    },
    onGoBack: () => null,
    ...COMMON_PROPS,
  },
};

export default meta;