import type { Meta, StoryObj } from '@storybook/react';
import { CCLiveTranscriptionShapeUtil } from './CCLiveTranscriptionShapeUtil';
import { TranscriptionService } from './transcriptionService';
import { getDefaultCCLiveTranscriptionProps } from '../cc-props';
import { CCLiveTranscriptionShape } from './CCLiveTranscriptionShapeUtil';
import { TLShapeId, IndexKey, TLParentId } from '@tldraw/tldraw';
import { Editor } from '@tldraw/editor';

const meta: Meta = {
  title: 'Components/Transcription',
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
};

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

// Mock editor
const mockEditor = {
  updateShape: () => {},
} as unknown as Editor;

// Mock shape data
const mockShape: CCLiveTranscriptionShape = {
  id: 'shape:1' as TLShapeId,
  type: 'cc-live-transcription',
  x: 0,
  y: 0,
  rotation: 0,
  index: 'a1' as IndexKey,
  parentId: 'page:page' as TLParentId,
  isLocked: false,
  opacity: 1,
  meta: {},
  typeName: 'shape',
  props: getDefaultCCLiveTranscriptionProps(),
};

// Basic story showing the transcription component
export const Default: Story = {
  args: {},
  render: () => {
    const shapeUtil = new CCLiveTranscriptionShapeUtil(mockEditor);
    return (
      <div style={{ width: '800px', height: '600px', border: '1px solid #ccc' }}>
        {shapeUtil.renderShapeContent(mockShape)}
      </div>
    );
  },
};

// Story showing the transcription service in action
export const WithService: Story = {
  args: {},
  render: () => {
    const service = new TranscriptionService('default');
    const shapeUtil = new CCLiveTranscriptionShapeUtil(mockEditor);
    
    return (
      <div style={{ width: '800px', height: '600px', border: '1px solid #ccc' }}>
        <div style={{ padding: '20px' }}>
          <h3>Transcription Service Demo</h3>
          <button 
            onClick={() => service.startTranscription()}
            style={{ marginRight: '10px', padding: '10px' }}
          >
            Start Transcription
          </button>
          <button 
            onClick={() => service.stopTranscription()}
            style={{ padding: '10px' }}
          >
            Stop Transcription
          </button>
        </div>
        <div style={{ marginTop: '20px' }}>
          {shapeUtil.renderShapeContent(mockShape)}
        </div>
      </div>
    );
  },
}; 