import * as React from "react";
import { View, ViewStyle } from "react-native";
import { Edge, SafeAreaView } from "react-native-safe-area-context";
import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
import { playerDimensionsHack } from "./utils";
import { DimensionsT, Configuration, getEdges } from "./playerWrapperUtils";
import { defaultStyles, useStyle } from "./playerWrapperStyle";

type Props = {
  entry: ZappEntry;
  style: ViewStyle & DimensionsT;
  containerStyle?: ViewStyle;
  inline?: boolean;
  docked?: boolean;
  pip?: boolean;
  isModal?: boolean;
  fullscreen?: boolean;
  isTabletPortrait?: boolean;
  configuration: Configuration;

  playerContent: (styles: ViewStyle) => React.ReactNode;
};

const PlayerWrapperComponent = (props: Props) => {
  const {
    entry,
    style,
    containerStyle,
    inline,
    isModal,
    isTabletPortrait,
    configuration,
    pip,
    playerContent,
  } = props;

  const styles = useStyle({
    style,
    inline,
    isModal,
    isTabletPortrait,
    configuration,
    pip,
  });

  const isTablet = useIsTablet();

  const isInlineModal = inline && isModal;

  const WrapperView = React.useMemo(() => (isTV() ? View : SafeAreaView), []);

  return (
    <WrapperView
      edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
      style={playerDimensionsHack}
    >
      <View
        testID={`${entry?.id}-player-container`}
        style={[
          defaultStyles.playerContainer,
          playerDimensionsHack,
          styles.containerDimensions,
          containerStyle,
        ]}
      >
        {playerContent(styles.childrenStyles)}
      </View>
    </WrapperView>
  );
};

export const PlayerWrapper = PlayerWrapperComponent;