import type { Meta, StoryObj } from '@storybook/react';

import { ChatBox } from '../../lib/templates/ChatBox';
import { ChatHistory } from './ChatHistory';
import { Text } from '..';

const meta = {
  title: 'Templates/ChatBox',
  component: ChatBox,
  tags: ['autodocs'],
  argTypes: {}
} satisfies Meta<typeof ChatBox>;

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

const historySample = new Array(10).fill(0).map((_, i) => ({
  content: `Message from history ${i}`,
  id: i.toString(),
  userId: 'user'
}));
export const Default: Story = {
  args: {
    title: 'AI App Generator',
    history: [],
    submitButtonText: 'Create app',
    onSubmit: (message) => console.log(message),
    loading: false
  }
};

export const Loading: Story = {
  args: {
    title: 'AI App Generator',
    history: [],
    submitButtonText: 'Create app',
    onSubmit: (message) => console.log(message),
    loading: true
  }
};

export const Disabled: Story = {
  args: {
    title: 'AI App Generator',
    history: [],
    submitButtonText: 'Create app',
    onSubmit: (message) => console.log(message),
    loading: true,
    disabled: true
  }
};

export const WithHistory: Story = {
  args: {
    title: 'AI App Generator',
    history: historySample,
    submitButtonText: 'Create app',
    onSubmit: (message) => console.log(message),
    loading: true,
    disabled: true
  }
};

export const WithMaxHeight: Story = {
  args: {
    title: 'AI App Generator',
    history: historySample,
    submitButtonText: 'Create app',
    onSubmit: (message) => console.log(message),
    loading: true,
    disabled: true
  }
};

export const WithChatBubbleHistory: Story = {
  args: {
    id: 'chatbox',
    history: historySample,
    submitButtonText: 'Create app',
    onSubmit: (message) => console.log(message),
    children: (
      <ChatHistory
        selfUserId="user"
        history={new Array(10).fill(0).map((_, i) => ({
          content: `Message from history ${i}`,
          userId: i % 2 === 0 ? 'user' : 'system',
          id: i.toString()
        }))}
      />
    ),
    compact: true
  }
};

export const WithInitialValue: Story = {
  args: {
    id: 'chatbox',
    submitButtonText: 'Create app',
    onSubmit: (message) => console.log(message),
    value: 'Initial value',
    children: (
      <ChatHistory
        selfUserId="user"
        history={new Array(10).fill(0).map((_, i) => ({
          content: `Message from history ${i}`,
          userId: i % 2 === 0 ? 'user' : 'system',
          id: i.toString()
        }))}
      />
    ),
    compact: true
  }
};

export const WithCompactLoading: Story = {
  args: {
    id: 'chatbox',
    submitButtonText: 'Create app',
    onSubmit: (message) => console.log(message),
    value: 'Initial value',
    children: (
      <ChatHistory
        selfUserId="user"
        history={new Array(10).fill(0).map((_, i) => ({
          content: `Message from history ${i}`,
          userId: i % 2 === 0 ? 'user' : 'system',
          id: i.toString()
        }))}
      />
    ),
    compact: true,
    loading: true
  }
};

export const WithAugmentedChatPrompt: Story = {
  args: {
    id: 'chatbox',
    submitButtonText: 'Create app',
    onSubmit: (message) => console.log(message),
    value: 'Initial value',
    children: (
      <ChatHistory
        selfUserId="user"
        history={new Array(10).fill(0).map((_, i) => ({
          content: `Message from history ${i}`,
          userId: i % 2 === 0 ? 'user' : 'system',
          id: i.toString()
        }))}
      />
    ),
    prompt: <Text>Augmented chat with prompt</Text>,
    compact: true,
    loading: false
  }
};