import React from "react";
import { View, ImageStyle } from "react-native";
import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
import { getXray } from "@applicaster/zapp-react-native-utils/logger";
import { useFocusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable/index.android";
import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";

const { Logger } = getXray();

import { recursiveCloneElementsWithState } from "../../utils";

const logger = new Logger("plugin", "plugins/navigation-action");

type ButtonProps = Record<string, any> & {
  style: ImageStyle;
};

const generateId = (cellUUID, suffixId) => `${cellUUID}--${suffixId}`;

const getNextFocusLeft = ({ nextFocusLeft, parentFocus, isRTL }) => {
  return (
    nextFocusLeft ||
    (isRTL ? parentFocus?.nextFocusRight : parentFocus?.nextFocusLeft)
  );
};

const getNextFocusRight = ({ nextFocusRight, parentFocus, isRTL }) => {
  return (
    nextFocusRight ||
    (isRTL ? parentFocus?.nextFocusLeft : parentFocus?.nextFocusRight)
  );
};

export function FocusableViewComponent(
  { style, children, item, ...otherProps }: ButtonProps,
  ref
) {
  const {
    cellUUID,
    groupId,
    suffixId,
    normalStyles,
    focusedStyles,
    nextFocusLeft,
    nextFocusRight,
    pluginIdentifier,
    disableFocus,
    onButtonFocus,
  } = otherProps;

  const parentFocus = useFocusable();
  const isRTL = useIsRTL();

  const actionContext = useActions(pluginIdentifier);

  const onPress = () => {
    if (!actionContext) {
      logger.warning(
        `Cannot resolve action context for ${pluginIdentifier} - please make sure the plugin is installed and up to date`
      );

      return;
    }

    actionContext?.invokeAction?.(item);
  };

  const onFocus = React.useCallback(
    (ref) => {
      onButtonFocus?.(ref);
    },
    [onButtonFocus]
  );

  const onBlur = React.useCallback(() => {
    onButtonFocus?.();
  }, [onButtonFocus]);

  return (
    <Focusable
      id={generateId(cellUUID, suffixId)}
      disableFocus={disableFocus}
      groupId={groupId}
      onPress={onPress}
      nextFocusUp={parentFocus?.nextFocusUp}
      nextFocusDown={parentFocus?.nextFocusDown}
      nextFocusLeft={getNextFocusLeft({ nextFocusLeft, parentFocus, isRTL })}
      nextFocusRight={getNextFocusRight({ nextFocusRight, parentFocus, isRTL })}
      ref={ref}
      onBlur={onBlur}
      onFocus={onFocus}
      isFocusableCell={false}
    >
      {(isFocused) => {
        const additionalStyles = isFocused ? focusedStyles : normalStyles;

        return (
          <View style={[style, additionalStyles]}>
            {recursiveCloneElementsWithState(isFocused, children)}
          </View>
        );
      }}
    </Focusable>
  );
}

export const FocusableView = React.forwardRef(FocusableViewComponent);