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

import {Dropdown} from './index';

const meta: Meta<typeof Dropdown> = {
  title: 'HuGo/Dropdown',
  component: Dropdown,
  argTypes: {
    titleMenu: {control: 'text'},
    buttonVariant: {control: 'radio', options: ['secondary', 'tertiary']},
    buttonSize: {control: 'radio', options: ['sm', 'lg']},
  },
};

type Story = StoryObj<typeof Dropdown>;

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

const COMMON_PROPS = {
  text: 'Dropdown',
  titleMenu: 'I am a title from Dropdown',
  data: [{id: 1}, {id: 2}, {id: 3}],
  renderItem,
};

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

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

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

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

export default meta;