import { createContext } from "react";
import * as React from "react";

type ContextProps = {
  ignoreOffsetContainer: boolean;
  bottomFocusableId: string;
  refs: any;
  isLanguageOverlayVisible: boolean;
  setIsLanguageOverlayVisible: (isVisible) => void;
  setShowComponentsContainer: (isVisible) => void;
  showComponentsContainer: boolean;
  setIsSeekBarTouch: (isTouch) => void;
  isSeekBarTouch: boolean;
};

export const PlayerContainerContext = createContext({
  ignoreOffsetContainer: false,
  isLanguageOverlayVisible: false,
  isSeekBarTouch: false,
} as ContextProps);

type Props = {
  children: any;
  refs: any;
  ignoreOffsetContainer;
  inline: boolean;
};

const bottomFocusableId = "player-bottom-focusable-container";

// TODO: If not android tv do nothing
export const PlayerContainerContextProvider = ({
  children,
  refs,
  ignoreOffsetContainer,
  inline,
}: Props) => {
  // On tvos when use push menu button, it close the player.
  // In case we have a language overlay open, we need to close overlay and not the player.
  const [isLanguageOverlayVisible, setIsLanguageOverlayVisible] =
    React.useState(false);

  const [showComponentsContainer, setShowComponentsContainer] =
    React.useState(true);

  const [isSeekBarTouch, setIsSeekBarTouch] = React.useState(false);

  const value = React.useMemo(
    () => ({
      ignoreOffsetContainer,
      refs,
      bottomFocusableId,
      isLanguageOverlayVisible,
      setIsLanguageOverlayVisible,
      showComponentsContainer,
      setShowComponentsContainer: inline ? setShowComponentsContainer : null,
      isSeekBarTouch,
      setIsSeekBarTouch,
    }),
    [
      ignoreOffsetContainer,
      refs,
      bottomFocusableId,
      isLanguageOverlayVisible,
      setIsLanguageOverlayVisible,
      showComponentsContainer,
      setShowComponentsContainer,
      isSeekBarTouch,
      setIsSeekBarTouch,
    ]
  );

  return (
    <PlayerContainerContext.Provider value={value}>
      {children}
    </PlayerContainerContext.Provider>
  );
};