import React, { useState, useCallback, memo } from 'react'
import { View, StyleSheet } from 'react-native'
import { SessionState } from '../../types'
import { SessionType } from '@multiplayer-app/session-recorder-common'
import { useSessionRecorder } from '../../context/SessionRecorderContext'

import FinalPopover from './FinalPopover'
import ModalContainer from './ModalContainer'
import InitialPopover from './InitialPopover'
import FloatingButton from './FloatingButton'
import ErrorBanner from './ErrorBanner'
import { logger } from '../../utils'
import { useSessionRecorderStore } from '../../context/useSessionRecorderStore'
import { sessionRecorderStore } from '../../context/SessionRecorderStore'

interface SessionRecorderWidgetProps {}

const SessionRecorderWidget: React.FC<SessionRecorderWidgetProps> = memo(() => {
  const { instance, openWidgetModal, closeWidgetModal } = useSessionRecorder()
  const isOnline = useSessionRecorderStore<boolean>((s) => s.isOnline)
  const sessionType = useSessionRecorderStore<SessionType | null>(
    (s) => s.sessionType,
  )
  const isModalVisible = useSessionRecorderStore<boolean>(
    (s) => s.isWidgetModalVisible,
  )
  const sessionState = useSessionRecorderStore<SessionState | null>(
    (s) => s.sessionState,
  )
  const error = useSessionRecorderStore<string | null>((s) => s.error)
  const [isSubmitting, setIsSubmitting] = useState(false)

  // Get configuration from instance
  const { widget, showContinuousRecording } = instance.config

  const dismissError = useCallback(() => {
    sessionRecorderStore.setState({ error: null })
  }, [])

  const handleError = useCallback((error: any, message: string) => {
    const errorMessage = error instanceof Error ? error.message : message
    logger.error('SessionRecorderWidget', message, error)
    sessionRecorderStore.setState({ error: errorMessage })
  }, [])

  const onStartRecording = useCallback(
    async (sessionType: SessionType) => {
      if (!isOnline) {
        handleError(
          new Error('Cannot start recording while offline'),
          'Cannot start recording while offline',
        )
        return
      }
      try {
        await instance.start(sessionType)
        closeWidgetModal()
      } catch (error) {
        handleError(error, 'Failed to start recording')
      }
    },
    [isOnline, handleError],
  )

  const onStopRecording = useCallback(
    async (comment?: string) => {
      try {
        setIsSubmitting(true)
        await instance.stop(comment)
        closeWidgetModal()
      } catch (error) {
        handleError(error, 'Failed to stop recording')
      } finally {
        setIsSubmitting(false)
      }
    },
    [handleError],
  )

  const onCancelSession = useCallback(async () => {
    try {
      await instance.cancel()
      closeWidgetModal()
    } catch (error) {
      handleError(error, 'Failed to cancel session')
    }
  }, [handleError])

  const onSaveContinuousSession = useCallback(async () => {
    try {
      await instance.save()
    } catch (error) {
      handleError(error, 'Failed to save continuous session')
    }
  }, [handleError])

  const isStarted =
    sessionState === SessionState.started ||
    sessionState === SessionState.paused
  const isContinuous = sessionType === SessionType.CONTINUOUS

  return (
    <>
      {widget.button?.visible && (
        <View pointerEvents="box-none" style={styles.overlayContainer}>
          <FloatingButton
            sessionState={sessionState}
            onPress={openWidgetModal}
          />
        </View>
      )}
      <ModalContainer isVisible={isModalVisible} onClose={closeWidgetModal}>
        {isStarted && !isContinuous ? (
          <FinalPopover
            isOnline={isOnline}
            isSubmitting={isSubmitting}
            textOverrides={widget.textOverrides}
            onClose={closeWidgetModal}
            onStopRecording={onStopRecording}
            onCancelSession={onCancelSession}
          >
            {error && <ErrorBanner error={error} onDismiss={dismissError} />}
          </FinalPopover>
        ) : (
          <InitialPopover
            isOnline={isOnline}
            isSubmitting={isSubmitting}
            textOverrides={widget.textOverrides}
            isContinuous={isStarted && isContinuous}
            showContinuousRecording={showContinuousRecording}
            onClose={closeWidgetModal}
            onStopRecording={onStopRecording}
            onStartRecording={onStartRecording}
            onSaveContinuousSession={onSaveContinuousSession}
          >
            {error && <ErrorBanner error={error} onDismiss={dismissError} />}
          </InitialPopover>
        )}
      </ModalContainer>
    </>
  )
})

export default SessionRecorderWidget

const styles = StyleSheet.create({
  overlayContainer: {
    ...StyleSheet.absoluteFillObject,
  },
})