import React, { useState } from 'react';
import {
  View,
  Text,
  Pressable,
  TextInput,
  ScrollView,
  Keyboard,
} from 'react-native';
import { type TextOverridesOptions } from '../../types';
import { sharedStyles } from './styles';
import ModalHeader from './ModalHeader';
import { logger } from '../../utils';

interface FinalPopoverProps extends React.PropsWithChildren {
  isOnline: boolean;
  textOverrides: TextOverridesOptions;
  onStopRecording: (comment: string) => void;
  onCancelSession: () => void;
  onClose: () => void;
  isSubmitting: boolean;
}

const FinalPopover: React.FC<FinalPopoverProps> = ({
  isOnline,
  textOverrides,
  onStopRecording,
  onCancelSession,
  isSubmitting,
  children,
}) => {
  const [comment, setComment] = useState('');

  const handleStopRecording = async () => {
    try {
      await onStopRecording(comment);
    } catch (error) {
      logger.error('FinalPopover', 'Failed to save session', error);
    }
  };

  return (
    <View style={sharedStyles.popoverContent}>
      <ModalHeader>
        <Pressable
          onPress={onCancelSession}
          disabled={!isOnline}
          style={sharedStyles.cancelButton}
        >
          <Text style={sharedStyles.cancelButtonText}>
            {textOverrides.cancelButtonText}
          </Text>
        </Pressable>
      </ModalHeader>

      <ScrollView
        style={sharedStyles.popoverBody}
        keyboardShouldPersistTaps="handled"
        contentInsetAdjustmentBehavior="automatic"
      >
        {children}
        <Text style={sharedStyles.title}>{textOverrides.finalTitle}</Text>
        <Text style={sharedStyles.description}>
          {textOverrides.finalDescription}
        </Text>

        <TextInput
          style={sharedStyles.commentInput}
          placeholder={textOverrides.commentPlaceholder}
          placeholderTextColor={'#9CA3AF'}
          value={comment}
          onChangeText={setComment}
          multiline
          numberOfLines={3}
          returnKeyType="done"
          blurOnSubmit
          onSubmitEditing={() => Keyboard.dismiss()}
        />

        <View style={sharedStyles.popoverFooter}>
          <Pressable
            disabled={isSubmitting || !isOnline}
            style={[sharedStyles.actionButton, sharedStyles.stopButton]}
            onPress={handleStopRecording}
          >
            <Text style={sharedStyles.actionButtonText}>
              {isSubmitting ? 'Saving...' : textOverrides.saveButtonText}
            </Text>
          </Pressable>
        </View>
      </ScrollView>
    </View>
  );
};

export default FinalPopover;