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

import { Button } from '~/components/ui/button';

export const DiffPreview = ({
  content,
  initialLines = 120,
}: {
  content: string;
  initialLines?: number;
}) => {
  const [expanded, setExpanded] = useState(false);
  const lines = content.split('\n');
  const visibleLines = expanded ? lines : lines.slice(0, initialLines);
  const hiddenCount = Math.max(lines.length - visibleLines.length, 0);

  return (
    <View className='gap-3 rounded-lg bg-zinc-950 p-3'>
      <View>
        {visibleLines.map((line, index) => {
          const color = line.startsWith('+')
            ? 'text-emerald-300'
            : line.startsWith('-')
              ? 'text-red-300'
              : line.startsWith('@@')
                ? 'text-sky-300'
                : 'text-zinc-100';
          return (
            <Text
              key={`${index}-${line.slice(0, 12)}`}
              className={`font-mono text-xs leading-5 ${color}`}
            >
              {line || ' '}
            </Text>
          );
        })}
      </View>
      {hiddenCount > 0 ? (
        <Button variant='outline' onPress={() => setExpanded(true)}>
          Show {hiddenCount} more lines
        </Button>
      ) : null}
    </View>
  );
};
