import * as R from "ramda";

import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
import {
  useNavigation,
  useIsTablet,
} from "@applicaster/zapp-react-native-utils/reactHooks";
import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";

export const useConfiguration = () => {
  const {
    videoModalState: { item },
  } = useNavigation();

  const { rivers, contentTypes, pluginConfigurations } = usePickFromState([
    "rivers",
    "contentTypes",
    "pluginConfigurations",
  ]);

  const targetScreenId = contentTypes?.[item?.type?.value]?.screen_id;
  const targetScreenConfiguration = rivers?.[targetScreenId];

  const pluginConfiguration =
    pluginConfigurations[targetScreenConfiguration?.type]?.configuration_json;

  const playerPluginConfig = playerManager.getPluginConfiguration();

  const config = R.mergeRight(playerPluginConfig, {
    ...targetScreenConfiguration?.general,
    ...targetScreenConfiguration?.styles,
    ...pluginConfiguration,
  });

  const {
    minimised_height = 0,
    minimised_height_tablet = 0,
    modal_background_color,
  } = config;

  const minimisedHeight = useIsTablet()
    ? minimised_height_tablet
    : minimised_height;

  return {
    minimised_height: Number(minimisedHeight),
    modal_background_color,
  };
};

const fullSize = {
  width: "100%",
  height: "100%",
};

export const playerDimensionsHack = platformSelect({
  android_tv: fullSize,
  amazon: fullSize,
  lg_tv: fullSize,
  samsung_tv: fullSize,
  default: {},
});