/**
 * Created by anjar on 12/15/16.
 */

import React from "react";
import {
  Platform,
  TouchableHighlight,
  TouchableNativeFeedback,
  TouchableOpacity,
  View,
} from "react-native";
import debounce from "lodash/debounce";
import PropTypes from "prop-types";
import { FlipColors } from "@flip.id/ui-kit";
import { TimeConstant } from "../../constants";
import { AppUtils } from "../../utils";

const DEFAULT_THRESHOLD_INTERVAL_CLICK = TimeConstant.SECOND.TWO;

const Touchable = ({ accessible = true, ...props }) => {
  const zero_padding = {
    padding: 0,
    paddingLeft: 0,
    paddingRight: 0,
    paddingTop: 0,
    paddingBottom: 0,
    paddingHorizontal: 0,
    paddingVertical: 0,
  };

  const zero_margin = {
    margin: 0,
    marginLeft: 0,
    marginRight: 0,
    marginTop: 0,
    marginBottom: 0,
    marginHorizontal: 0,
    marginVertical: 0,
  };

  const container_style = {
    ...zero_padding,
    overflow: "hidden",
    flexDirection: "row",
    borderWidth: 0,
  };

  const component_style = {
    ...zero_margin,
    flex: 1,
  };

  const debouncedOnPress = () => {
    props.onPress?.();
  };

  const onPress = props.preventFastClick
    ? debounce(
        debouncedOnPress,
        props.fastClickInterval ?? DEFAULT_THRESHOLD_INTERVAL_CLICK,
        { leading: true, trailing: false }
      )
    : props.onPress;

  const isHighlightProps =
    props.feedback === "highlight" ||
    (AppUtils.isIOS() && props.iosFeedback === "highlight") ||
    (AppUtils.isAndroid() && props.androidFeedback === "highlight");

  if (isHighlightProps) {
    return (
      <TouchableHighlight
        accessible={accessible}
        accessibilityLabel={props.accessibilityLabel}
        testID={props.testID}
        onPress={onPress}
        style={props.style}
        hitSlop={props.hitSlop}
        disabled={props.disabled}
        underlayColor={props.underlayColor ?? FlipColors.neutral.lightGrey}
      >
        {props.children}
      </TouchableHighlight>
    );
  }

  const version = Platform.Version;
  if (version >= 21 && Platform.OS === "android") {
    if (props.is_prevent_ripple_overflow) {
      return (
        <View style={[props.style, container_style]}>
          <TouchableNativeFeedback
            accessible={accessible}
            accessibilityLabel={props.accessibilityLabel}
            testID={props.testID}
            onPressOut={props.onPressOut}
            onPress={onPress}
            style={[props.style, component_style]}
            background={props.background}
            hitSlop={props.hitSlop}
            disabled={props.disabled}
          >
            {props.children}
          </TouchableNativeFeedback>
        </View>
      );
    } else {
      return (
        <TouchableNativeFeedback
          accessible={accessible}
          accessibilityLabel={props.accessibilityLabel}
          testID={props.testID}
          onPressOut={props.onPressOut}
          onPress={onPress}
          style={[props.style]}
          background={props.background}
          hitSlop={props.hitSlop}
          disabled={props.disabled}
        >
          {props.children}
        </TouchableNativeFeedback>
      );
    }
  } else {
    return (
      <TouchableOpacity
        accessible={accessible}
        accessibilityLabel={props.accessibilityLabel}
        testID={props.testID}
        onPress={onPress}
        style={props.style}
        hitSlop={props.hitSlop}
        disabled={props.disabled}
      >
        {props.children}
      </TouchableOpacity>
    );
  }
};

Touchable.propTypes = {
  is_prevent_ripple_overflow: PropTypes.bool,
  onPress: PropTypes.func,
  onPressOut: PropTypes.func,
  preventFastClick: PropTypes.bool,
  feedback: PropTypes.string,
  iosFeedback: PropTypes.string,
  androidFeedback: PropTypes.string,
};

export default Touchable;