import React, { useMemo, useState } from 'react';
import { View, Text, Pressable, Switch } from 'react-native';
import { SessionType } from '@multiplayer-app/session-recorder-common';
import { type TextOverridesOptions } from '../../types';
import { sharedStyles } from './styles';
import ModalHeader from './ModalHeader';
import { CapturingIcon } from './icons';
import { logger } from '../../utils';

interface InitialPopoverProps extends React.PropsWithChildren {
  isContinuous: boolean;
  showContinuousRecording: boolean;
  textOverrides: TextOverridesOptions;
  onStartRecording: (sessionType: SessionType) => void;
  onStopRecording: (comment?: string) => void;
  onSaveContinuousSession: () => void;
  onClose: () => void;
  isSubmitting: boolean;
  isOnline: boolean;
}

const InitialPopover: React.FC<InitialPopoverProps> = ({
  isContinuous,
  textOverrides,
  showContinuousRecording,
  onStartRecording,
  onStopRecording,
  onSaveContinuousSession,
  isOnline,
  children,
}) => {
  const [saving, setSaving] = useState(false);
  const [loading, setLoading] = useState(false);
  const [continuousRecording, setContinuousRecording] = useState(isContinuous);

  const handleStartRecording = async () => {
    try {
      setLoading(true);
      await onStartRecording(SessionType.MANUAL);
    } catch (error) {
      logger.error('InitialPopover', 'Failed to start recording', error);
    } finally {
      setLoading(false);
    }
  };

  const handleToggleContinuousRecording = async (value: boolean) => {
    try {
      setLoading(true);
      setContinuousRecording(value);
      if (value) {
        await onStartRecording(SessionType.CONTINUOUS);
      } else {
        await onStopRecording();
      }
    } catch (error) {
      logger.error(
        'InitialPopover',
        'Failed to toggle continuous recording',
        error
      );
    } finally {
      setLoading(false);
    }
  };

  const handleSaveContinuousSession = async () => {
    try {
      setSaving(true);
      await onSaveContinuousSession();
    } catch (error) {
      logger.error(
        'InitialPopover',
        'Failed to save continuous session',
        error
      );
    } finally {
      setSaving(false);
    }
  };

  const textContent = useMemo(() => {
    return {
      label: textOverrides.continuousRecordingLabel,
      title: showContinuousRecording
        ? textOverrides.initialTitleWithContinuous
        : textOverrides.initialTitleWithoutContinuous,
      description: showContinuousRecording
        ? textOverrides.initialDescriptionWithContinuous
        : textOverrides.initialDescriptionWithoutContinuous,
    };
  }, [showContinuousRecording, textOverrides]);

  return (
    <View style={sharedStyles.popoverContent}>
      <ModalHeader />
      <View style={sharedStyles.popoverBody}>
        {children}
        {showContinuousRecording && (
          <View style={sharedStyles.continuousRecordingSection}>
            <Text style={sharedStyles.continuousRecordingLabel}>
              {textContent.label}
            </Text>
            <Switch
              disabled={loading || !isOnline}
              value={continuousRecording}
              ios_backgroundColor="#e2e8f0"
              onValueChange={handleToggleContinuousRecording}
              trackColor={{ false: '#e2e8f0', true: '#493bff' }}
              thumbColor={'#ffffff'}
            />
          </View>
        )}
        {!continuousRecording ? (
          <>
            <Text style={sharedStyles.title}>{textContent.title}</Text>
            <Text style={sharedStyles.description}>
              {textContent.description}
            </Text>
            <View style={sharedStyles.popoverFooter}>
              <Pressable
                disabled={loading || !isOnline}
                onPress={handleStartRecording}
                style={[sharedStyles.actionButton, sharedStyles.startButton]}
              >
                <Text style={sharedStyles.actionButtonText}>
                  {loading
                    ? 'Starting to record...'
                    : textOverrides.startRecordingButtonText}
                </Text>
              </Pressable>
            </View>
          </>
        ) : (
          <>
            <View style={sharedStyles.continuousOverlay}>
              <View style={sharedStyles.continuousOverlayHeader}>
                <CapturingIcon size={20} color="red" />
                <Text style={sharedStyles.continuousOverlayTitle}>
                  {textOverrides.continuousOverlayTitle}
                </Text>
              </View>
              <Text style={sharedStyles.continuousOverlayDescription}>
                {textOverrides.continuousOverlayDescription}
              </Text>
            </View>
            <View style={sharedStyles.popoverFooter}>
              <Pressable
                disabled={saving || !isOnline}
                onPress={handleSaveContinuousSession}
                style={[sharedStyles.actionButton, sharedStyles.saveButton]}
              >
                <Text style={sharedStyles.actionButtonText}>
                  {saving
                    ? 'Saving...'
                    : textOverrides.saveLastSnapshotButtonText}
                </Text>
              </Pressable>
            </View>
          </>
        )}
      </View>
    </View>
  );
};

export default InitialPopover;