/* eslint-disable no-extra-parens */
import React from "react";
import { StyleSheet, View, ViewStyle } from "react-native";
import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
// @ts-ignore
import { forceFocusableFocus } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
import { Spinner } from "@applicaster/zapp-react-native-ui-components/Components/Spinner";
import { getPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";

type Props = {
  styles?: ViewStyle;
  videoStyle?: ViewStyle;
};

const localStyles = StyleSheet.create({
  bufferStyles: {
    flex: 1,
    position: "absolute",
    width: "100%",
    height: "100%",
    alignItems: "center",
    justifyContent: "center",
  },
});

const bufferFocusableGroupName = "PlayerWrapper-BufferAnimationComponent";
const bufferFocusableName = "PlayerWrapper-BufferAnimationComponent-Focusable";

export class BufferAnimation extends React.PureComponent<Props> {
  componentDidMount() {
    if (getPlatform() === "tvos") {
      forceFocusableFocus(bufferFocusableGroupName, bufferFocusableName);
    }
  }

  render() {
    return (
      <View style={localStyles.bufferStyles}>
        {/* @ts-ignore */}
        <FocusableGroup id={bufferFocusableGroupName}>
          <Focusable
            id={bufferFocusableName}
            groupId={bufferFocusableGroupName}
            isParallaxDisabled={true}
            isPressDisabled={true}
          >
            {["ios", "tvos"].includes(getPlatform()) ? (
              <Spinner size="large" />
            ) : (
              () => <Spinner size="large" />
            )}
          </Focusable>
        </FocusableGroup>
      </View>
    );
  }
}