import React, { useCallback, useMemo } from "react";

import { FlipColors } from "@flip.id/ui-kit";
import type { IButtonProps, IFlexProps } from "native-base";
import type { IColors } from "native-base/lib/typescript/theme/base/colors";
import { AccessibilityProps, Pressable, View } from "react-native";
import KeyPad from "./components/KeyPad";
import { F2Text } from "../../Flip2/components";
import { StyleUtils } from "../../Flip2/utils";

interface KeyboardNumpadProps {
  onPressSubmit?: () => void;
  onPressDelete?: () => void;
  onPressKey?: (item: string) => void;
  submitColor?: string | IColors;
  isHideDelete?: boolean;
  isHideSubmit?: boolean;
  shadow?: IFlexProps["shadow"];
  as?: React.ComponentType<any>;
  accessibilityLabelKeypad?: string;
  disabled?: boolean;
}

interface KeyboardNumericProps {
  swapDeleteSubmit?: boolean;
  testID?: string;
  testIDKeypad?: string;
  keyboardShouldPersistTaps?: boolean;
  submitLabel?: string;
  submitButtonProps?: IButtonProps;
  hasThousandDigits?: boolean;
  SubmitComponent?: () => React.ReactElement;
}

const widthThird = Math.floor(StyleUtils.getScreenWidth() / 3) - 16;

export const KeyboardNumeric: React.FC<
  KeyboardNumericProps & KeyboardNumpadProps & AccessibilityProps
> = (props) => {
  const {
    swapDeleteSubmit,
    testID,
    testIDKeypad,
    onPressKey,
    onPressSubmit,
    onPressDelete,
    isHideDelete,
    isHideSubmit,
    as,
    shadow,
    accessibilityLabelKeypad,
    submitLabel,
    submitButtonProps,
    hasThousandDigits,
    disabled,
    SubmitComponent,
    ...rest
  } = props;

  const defaultHeight =
    StyleUtils.getScreenHeight() > StyleUtils.IPHONE_7_HEIGHT ? 52 : 46;

  const data = useMemo(
    () => [
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
      "9",
      swapDeleteSubmit ? "submit" : "delete",
      "0",
      swapDeleteSubmit ? "delete" : "submit",
    ],
    [swapDeleteSubmit]
  );

  const onPress = useCallback(
    (item: string) => {
      if (item === "delete") {
        return onPressDelete?.();
      }
      if (item === "submit") {
        return onPressSubmit?.();
      }
      return onPressKey?.(item);
    },
    [onPressDelete, onPressSubmit, onPressKey]
  );

  return (
    <View
      style={[
        {
          backgroundColor: "white",
          paddingVertical: 12,
          paddingStart: 16,
          flexDirection: "row",
          flexWrap: "wrap",
        },
        !!shadow && {
          shadowOffset: {
            width: 0,
            height: 3,
          },
          shadowOpacity: 1,
          shadowRadius: 2,
          elevation: 10,
        },
      ]}
      testID={testID}
      {...rest}
    >
      {data.map((item) => {
        if (isHideDelete && item === "delete") {
          return (
            <View
              style={{ height: defaultHeight, width: widthThird }}
              key={item}
            />
          );
        }

        if ((isHideSubmit || submitLabel) && item === "submit") {
          if (hasThousandDigits) {
            item = "000";
          } else {
            return (
              <View
                style={{
                  height: defaultHeight,
                  width: widthThird,
                  marginStart: 8,
                }}
                key={item}
              />
            );
          }
        }

        return (
          <KeyPad
            testID={`${testIDKeypad}-${item}`}
            accessibilityLabel={`${accessibilityLabelKeypad}-${item}`}
            as={as}
            w={widthThird}
            key={item}
            text={item}
            onPress={onPress}
            disabled={disabled}
          />
        );
      })}

      {submitLabel ? (
        SubmitComponent ? (
          <SubmitComponent
            onPress={onPressSubmit}
            {...submitButtonProps}
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-ignore
            style={{ width: "100%", marginTop: 8, paddingEnd: 16 }}
            text={submitLabel}
          />
        ) : (
          <View
            style={{
              width: "100%",
              paddingEnd: 16,
            }}
          >
            <Pressable
              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
              // @ts-ignore
              style={({ pressed }) => [
                {
                  width: "100%",
                  marginTop: 4,
                  borderWidth: 1.5,
                  borderColor: pressed
                    ? FlipColors.flipOrange.Plus2
                    : FlipColors.flipOrange.Main,
                  borderRadius: 26,
                  height: defaultHeight,
                  alignItems: "center",
                  justifyContent: "center",
                },
              ]}
              onPress={onPressSubmit}
              {...submitButtonProps}
            >
              {({ pressed }) => (
                <F2Text
                  style={[
                    {
                      color: pressed
                        ? FlipColors.flipOrange.Plus2
                        : FlipColors.flipOrange.Main,
                    },
                  ]}
                  decoration={"bold"}
                >
                  {submitLabel}
                </F2Text>
              )}
            </Pressable>
          </View>
        )
      ) : null}
    </View>
  );
};

export default React.memo(KeyboardNumeric);