import type { Meta, StoryObj } from '@storybook/angular';
import { ConversationItem } from './conversation-item';
import { moduleMetadata } from '@storybook/angular';
import { NgClass, NgIf, DatePipe } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ChatbotConversation } from '../../services/conversations.service';

// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
const meta: Meta<ConversationItem> = {
  title: 'Chatbot/Conversation/ConversationItem',
  component: ConversationItem,
  tags: ['autodocs'],
  decorators: [
    moduleMetadata({
      imports: [NgClass, NgIf, DatePipe, FormsModule],
      providers: []
    })
  ],
  argTypes: {
    isActive: { control: 'boolean' },
    onSelect: { action: 'selected' },
    onShare: { action: 'shared' },
    onRename: { action: 'renamed' },
    onPin: { action: 'pinned' },
    onDelete: { action: 'deleted' }
  },
};

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

// Create a mock conversation
const createMockConversation = (name: string, description: string, pinned: boolean = false): ChatbotConversation => {
  const conversation = new ChatbotConversation();
  conversation.name = name;
  conversation.description = description;
  conversation.pinned = pinned;
  conversation.lastMessageDate = new Date();
  return conversation;
};

// Default story
export const Default: Story = {
  args: {
    conversation: createMockConversation('Project Discussion', 'Latest updates on the project timeline'),
    isActive: false
  },
};

// Active conversation
export const Active: Story = {
  args: {
    conversation: createMockConversation('Project Discussion', 'Latest updates on the project timeline'),
    isActive: true
  },
};

// Pinned conversation
export const Pinned: Story = {
  args: {
    conversation: createMockConversation('Important Meeting', 'CEO quarterly update', true),
    isActive: false
  },
};

// Long name and description
export const LongContent: Story = {
  args: {
    conversation: createMockConversation(
      'Very Long Conversation Name That Should Truncate',
      'This is a very long description that should demonstrate how the component handles overflow text in the description area of the conversation item component',
    ),
    isActive: false
  },
};
