import { FlipColors } from "@flip.id/ui-kit";
import { F2Text, F2Touchable } from "../../../Flip2/components";
import { AppUtils } from "../../../Flip2/utils";
import React, { useCallback, useMemo } from "react";
import {
  Platform,
  // TouchableNativeFeedback,
  View,
} from "react-native";
import { DeleteNumpad } from "../../../../icons/function";
import { DirectionRight } from "../../../../icons/navigation";
import { EnhancedTouchableOpacity } from "../../EnhancedTouchableOpacity";
import { StyleUtils } from "../../../Flip2/utils";

interface IKeypad {
  text: string;
  w: number;
  h?: string;
  as?: React.ComponentType<any>;
  onPress?: (text: string) => void;
  accessibilityLabel?: string;
  testID?: string;
  disabled?: boolean;
}
const KeyPad: React.FC<IKeypad> = (props) => {
  const { w, as, onPress, text, accessibilityLabel, testID, disabled } = props;

  const isSmallScreenHeight =
    StyleUtils.getScreenHeight() <= StyleUtils.IPHONE_7_HEIGHT;
  const defaultHeight = isSmallScreenHeight ? 46 : 52;
  const isSubmitKey = text === "submit";
  const isDeleteKey = text === "delete";

  const onPressKeypad = useCallback(() => {
    onPress?.(text);
  }, [onPress, text]);

  if (as) {
    return (
      <EnhancedTouchableOpacity
        testID={testID}
        accessibilityLabel={accessibilityLabel}
        w={w}
        h={"52px"}
        mb={"12px"}
        mr={2}
        as={as}
        display="flex"
        justifyContent="center"
        alignItems="center"
        onPress={onPressKeypad}
        disabled={disabled}
      >
        <View
          style={{
            width: isSubmitKey ? "100%" : Platform.OS === "web" ? "46px" : 46,
            height: isSubmitKey ? "100%" : Platform.OS === "web" ? "46px" : 46,
            borderRadius: 16,
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          {isSubmitKey && <DirectionRight color={"flipOrange.Main"} size="6" />}
          {isDeleteKey && <DeleteNumpad size="6" />}
          {!isSubmitKey && !isDeleteKey && <NumberText text={text} />}
        </View>
      </EnhancedTouchableOpacity>
    );
  }

  const nativeProps = useMemo(() => {
    if (AppUtils.isAndroid() || AppUtils.isIOS()) {
      const { TouchableNativeFeedback } = require("react-native");
      return {
        background: TouchableNativeFeedback.Ripple(
          FlipColors.neutral.Container,
          false
        ),
      };
    }
    return {};
  }, []);

  return (
    <F2Touchable
      testID={testID}
      accessibilityLabel={accessibilityLabel}
      iosFeedback={"highlight"}
      style={{
        width: w,
        height: defaultHeight,
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 26,
        marginBottom: isSmallScreenHeight ? 0 : 12,
        marginEnd: 8,
      }}
      is_prevent_ripple_overflow={true}
      onPress={onPressKeypad}
      disabled={disabled}
      {...nativeProps}
    >
      <View
        style={{
          width: "100%",
          height: isSubmitKey ? "100%" : defaultHeight,
          borderRadius: 23,
          backgroundColor: isSubmitKey
            ? FlipColors.flipOrange.Minus3
            : "transparent",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        {isSubmitKey && <DirectionRight color={"flipOrange.Main"} size="6" />}
        {isDeleteKey && <DeleteNumpad size="6" />}
        {!isSubmitKey && !isDeleteKey && <NumberText text={text} />}
      </View>
    </F2Touchable>
  );
};

export default React.memo(KeyPad);

type INumberText = {
  text: string;
};

const NumberText = React.memo(({ text }: INumberText) => (
  <F2Text size={26} decoration="bold">
    {text}
  </F2Text>
));