import type { Meta, StoryObj } from '@storybook/react';
import { ModernChatInput } from './ModernChatInput';
import React, { useState } from 'react';

const meta: Meta<typeof ModernChatInput> = {
  title: 'Assistant/ModernChatInput',
  component: ModernChatInput,
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    enableAudioInput: {
      control: 'boolean',
      description: 'Whether to show audio input (voice recording).',
    },
    enableFileAttachment: {
      control: 'boolean',
      description: 'Whether to show the file attachment button.',
    },
    enableDocumentCreation: {
      control: 'boolean',
      description: 'Whether to show the "Create document" action.',
    },
    enablePodcastGeneration: {
      control: 'boolean',
      description: 'Whether to show the "Generate podcast" action.',
    },
    enableSearch: {
      control: 'boolean',
      description: 'Whether to show the "Search" action.',
    },
  },
};

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

export const Default: Story = {
  render: args => {
    const [value, setValue] = useState('');
    return (
      <div className="w-[600px]">
        <ModernChatInput
          {...args}
          value={value}
          onChange={setValue}
          onSubmit={action => {
            alert(`Submitted: "${value}" ${action ? `with action: ${action}` : ''}`);
            setValue('');
          }}
          onVoiceRecording={text => setValue(text)}
        />
      </div>
    );
  },
};

export const FullPage: Story = {
  args: {
    isFullPage: true,
  },
  render: args => {
    const [value, setValue] = useState('I need help with the reports');
    return (
      <div className="w-full bg-slate-50 p-10 min-h-[300px]">
        <ModernChatInput
          {...args}
          value={value}
          onChange={setValue}
          onSubmit={() => setValue('')}
        />
      </div>
    );
  },
};

/**
 * Text-only input: all action buttons and extras are disabled.
 * Only the text input and send button remain.
 */
export const TextOnly: Story = {
  args: {
    enableAudioInput: false,
    enableFileAttachment: false,
    enableDocumentCreation: false,
    enablePodcastGeneration: false,
    enableSearch: false,
  },
  render: args => {
    const [value, setValue] = useState('');
    return (
      <div className="w-[600px]">
        <ModernChatInput
          {...args}
          value={value}
          onChange={setValue}
          onSubmit={() => setValue('')}
        />
      </div>
    );
  },
};

/**
 * Selective features: only document creation and search are enabled.
 */
export const SelectiveActions: Story = {
  args: {
    enableAudioInput: false,
    enableFileAttachment: false,
    enableDocumentCreation: true,
    enablePodcastGeneration: false,
    enableSearch: true,
  },
  render: args => {
    const [value, setValue] = useState('');
    return (
      <div className="w-[600px]">
        <ModernChatInput
          {...args}
          value={value}
          onChange={setValue}
          onSubmit={action => {
            alert(`Submitted: "${value}" ${action ? `with action: ${action}` : ''}`);
            setValue('');
          }}
        />
      </div>
    );
  },
};