import { Text, View } from 'react-native';

import { ThreadListRow } from '~/components/threads/thread-list-row';
import { Button } from '~/components/ui/button';
import { Card } from '~/components/ui/card';
import { EmptyState } from '~/components/ui/empty-state';
import { Textarea } from '~/components/ui/textarea';

type Thread = Parameters<typeof ThreadListRow>[0]['thread'];

export const SpoonDetailThreads = ({
  creating,
  onCreate,
  onOpenThread,
  prompt,
  setPrompt,
  threads,
}: {
  creating: boolean;
  onCreate: () => void;
  onOpenThread: (threadId: string) => void;
  prompt: string;
  setPrompt: (prompt: string) => void;
  threads: Thread[];
}) => (
  <View className='gap-3'>
    <Card className='gap-3'>
      <Text className='text-foreground font-semibold'>New thread</Text>
      <Textarea
        label='Prompt'
        placeholder='Ask Spoon to review or change this fork...'
        value={prompt}
        onChangeText={setPrompt}
      />
      <Button disabled={creating || !prompt.trim()} onPress={onCreate}>
        {creating ? 'Creating...' : 'Create thread'}
      </Button>
    </Card>
    {threads.length ? (
      threads.map((thread) => (
        <ThreadListRow
          key={thread._id}
          thread={thread}
          onPress={() => onOpenThread(thread._id)}
        />
      ))
    ) : (
      <EmptyState
        description='Create a thread when this fork needs review or code.'
        title='No threads yet'
      />
    )}
  </View>
);
