import type { Meta, StoryObj } from '@storybook/angular';
import { ExportChatButton } from './export-chat-button';
import { moduleMetadata } from '@storybook/angular';
import { NgClass } from '@angular/common';

// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
const meta: Meta<ExportChatButton> = {
  title: 'Chatbot/Actions/ExportChatButton',
  component: ExportChatButton,
  tags: ['autodocs'],
  decorators: [
    moduleMetadata({
      imports: [NgClass],
      providers: []
    })
  ],
  argTypes: {
    onExport: { action: 'exported' }
  },
};

export default meta;
type Story = StoryObj<ExportChatButton>;

// Default state
export const Default: Story = {
  args: {},
};

// Active dropdown
export const ActiveDropdown: Story = {
  args: {},
  play: async ({ canvasElement, component }) => {
    // Simulate clicking the button to open the dropdown
    component.isDropdownActive = true;
  },
};

// Custom story to demonstrate hover state
export const HoverState: Story = {
  args: {},
  parameters: {
    docs: {
      description: {
        story: 'Hover over the button to see the hover state. The button background changes to blue and text becomes white.'
      }
    }
  }
};

// Custom story to demonstrate the export functionality
export const ExportFunctionality: Story = {
  args: {},
  parameters: {
    docs: {
      description: {
        story: 'Click on the button to open the dropdown, then select a format to export. The onExport event will be emitted with the selected format.'
      }
    }
  }
};
