import React, {
  createContext,
  useContext,
  useEffect,
  useCallback,
  type PropsWithChildren,
} from 'react';
import { type SessionRecorderOptions, SessionState } from '../types';
import sessionRecorder from '../session-recorder';
import { ScreenRecorderView } from '../components/ScreenRecorderView';
import SessionRecorderWidget from '../components/SessionRecorderWidget';
import { SessionType } from '@multiplayer-app/session-recorder-common';
import {
  sessionRecorderStore,
  type SessionRecorderState,
} from './SessionRecorderStore';
import { useStoreSelector } from './useStoreSelector';

interface SessionRecorderContextType {
  instance: typeof sessionRecorder;
  openWidgetModal: () => void;
  closeWidgetModal: () => void;
  startSession: (sessionType?: SessionType) => Promise<void>;
  stopSession: (comment?: string) => Promise<void>;
  pauseSession: () => Promise<void>;
  resumeSession: () => Promise<void>;
  cancelSession: () => Promise<void>;
  saveSession: () => Promise<void>;
}

const SessionRecorderContext = createContext<SessionRecorderContextType | null>(
  null
);

export interface SessionRecorderProviderProps extends PropsWithChildren {
  options?: SessionRecorderOptions;
}

export const SessionRecorderProvider: React.FC<
  SessionRecorderProviderProps
> = ({ children, options }) => {
  const isInitialized = useStoreSelector<SessionRecorderState, boolean>(
    sessionRecorderStore,
    (s) => s.isInitialized
  );

  useEffect(() => {
    if (options) {
      sessionRecorder.init(options);
    }
    sessionRecorderStore.setState({
      isInitialized: sessionRecorder.isInitialized,
    });
  }, []);

  useEffect(() => {
    sessionRecorderStore.setState({
      sessionState: sessionRecorder.sessionState,
      sessionType: sessionRecorder.sessionType,
    });
    const onStateChange = (
      sessionState: SessionState,
      sessionType: SessionType
    ) => {
      sessionRecorderStore.setState({ sessionState, sessionType });
    };
    const onInit = () => {
      sessionRecorderStore.setState({ isInitialized: true });
    };
    sessionRecorder.on('state-change', onStateChange);
    sessionRecorder.on('init', onInit);
    return () => {
      sessionRecorder.off('state-change', onStateChange);
      sessionRecorder.off('init', onInit);
    };
  }, []);

  const startSession = useCallback(
    (sessionType: SessionType = SessionType.MANUAL) => {
      return sessionRecorder.start(sessionType);
    },
    []
  );

  const stopSession = useCallback((comment?: string) => {
    return sessionRecorder.stop(comment);
  }, []);

  const pauseSession = useCallback(() => {
    return sessionRecorder.pause();
  }, []);

  const resumeSession = useCallback(() => {
    return sessionRecorder.resume();
  }, []);

  const cancelSession = useCallback(() => {
    return sessionRecorder.cancel();
  }, []);

  const saveSession = useCallback(() => {
    return sessionRecorder.save();
  }, []);

  const openWidgetModal = useCallback(() => {
    sessionRecorderStore.setState({ isWidgetModalVisible: true });
  }, []);

  const closeWidgetModal = useCallback(() => {
    sessionRecorderStore.setState({ isWidgetModalVisible: false });
  }, []);

  return (
    <SessionRecorderContext.Provider
      value={{
        instance: sessionRecorder,
        openWidgetModal,
        closeWidgetModal,
        startSession,
        stopSession,
        pauseSession,
        resumeSession,
        cancelSession,
        saveSession,
      }}
    >
      <ScreenRecorderView>{children}</ScreenRecorderView>
      {isInitialized && !!sessionRecorder.config.widget.enabled && (
        <SessionRecorderWidget />
      )}
    </SessionRecorderContext.Provider>
  );
};

export const useSessionRecorder = (): SessionRecorderContextType => {
  const context = useContext(SessionRecorderContext);
  if (!context) {
    throw new Error(
      'useSessionRecorder must be used within a SessionRecorderProvider'
    );
  }
  return context;
};