// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0

import React, {
  useState,
  useContext,
  useEffect,
  useRef,
  ReactNode
} from 'react';
import { useLocation } from 'react-router-dom';
import { useMeetingManager } from 'amazon-chime-sdk-component-library-react';

import routes from '../constants/routes';


export type NavigationContextType = {
  showNavbar: boolean;
  showRoster: boolean;
  showMetrics: boolean;
  showBreakout: boolean;
  toggleRoster: () => void;
  toggleNavbar: () => void;
  toggleBreakout: () => void;
  openRoster: () => void;
  closeRoster: () => void;
  openNavbar: () => void;
  closeNavbar: () => void;
  openBreakout: () => void;
  closeBreakout: () => void;
  toggleMetrics: () => void;
};

type Props = {
    children: ReactNode;
};

const NavigationContext = React.createContext<NavigationContextType | null>(
  null
);

const isDesktop = () => window.innerWidth > 768;

const NavigationProvider = ({ children }: Props) => {
  const [showNavbar, setShowNavbar] = useState(() => isDesktop());
  const [showRoster, setShowRoster] = useState(() => isDesktop());
  const [showBreakout, setShowBreakout] = useState(false);
  const [showMetrics, setShowMetrics] = useState(false);
  const isDesktopView = useRef(isDesktop());

  const location = useLocation();
  const meetingManager = useMeetingManager();

  

  useEffect(() => {
    if (location.pathname.includes(routes.MEETING)) {
      return () => {
        console.log('NavigationProvider >> Leaving the meeting');
        meetingManager.leave();
      };
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [location.pathname]);

  useEffect(() => {
    const handler = () => {
      const isResizeDesktop = isDesktop();
      if (isDesktopView.current === isResizeDesktop) {
        return;
      }

      isDesktopView.current = isResizeDesktop;

      if (!isResizeDesktop) {
        setShowNavbar(false);
        setShowRoster(false);
        setShowBreakout(false);
      } else {
        setShowNavbar(true);
      }
    };

    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);

  const toggleRoster = (): void => {
    setShowRoster(!showRoster);
    if(!showRoster) {
      console.log('closing Breakout')
      setShowBreakout(false);
    }
  };

  const toggleNavbar = (): void => {
    setShowNavbar(!showNavbar);
  };

  const toggleMetrics = () => {
    setShowMetrics(currentState => !currentState);
  };

  const toggleBreakout = () => {
    setShowBreakout(!showBreakout);
    if(!showBreakout) {
      console.log('closing Roster')
      setShowRoster(false);
    }
  }

  const openNavbar = (): void => {
    setShowNavbar(true);
  };

  const closeNavbar = (): void => {
    setShowNavbar(false);
  };

  const openRoster = (): void => {
    setShowRoster(true);
  };

  const closeRoster = (): void => {
    setShowRoster(false);
  };

  const openBreakout = (): void => {
    setShowBreakout(true);
  }

  const closeBreakout = (): void => {
    setShowBreakout(false);
  }

  const providerValue = {
    showNavbar,
    showRoster,
    showMetrics,
    showBreakout,
    toggleRoster,
    toggleNavbar,
    toggleMetrics,
    toggleBreakout,
    openRoster,
    closeRoster,
    openNavbar,
    closeNavbar,
    openBreakout,
    closeBreakout
  };
  return (
    <NavigationContext.Provider value={providerValue}>
      {children}
    </NavigationContext.Provider>
  );
};

const useNavigation = (): NavigationContextType => {
  const context = useContext(NavigationContext);
  if (!context) {
    throw Error('Use useNavigation in NavigationProvider');
  }
  return context;
};

export { NavigationProvider, useNavigation };