import React from 'react';
import { View } from 'react-native';
import Tips from 'react-native-tips';
import _ from 'lodash';

import AButton from '../../Components/AButton';
import AText from '../../Components/AText';
import CoachMarkConstant from '../../common/Constants/CoachMarkConstant';
import { translate } from '../../Localization';

type Props = {
  children: any,
  isCoachMark: boolean,
  visible: boolean,
  coachMarkNextTips?: Function,
  position?: string,
  message: string,
  hasButton?: boolean,
  buttonText?: string,
  accessibilityLabel?: string,
  accessibilityLabelForButton?: string,
  customContainerStyle?: any,
  customContentStyle?: any,
  customChildrenStyle?: any,
  enableChildrenInteraction?: boolean;
  delay?: number;
  onRequestClose?: Function;
};

const PREVENT_NEXT_COACH_MARK_TIMEOUT = 1000;
const debounceOptions = {
  leading: true,
  trailing: false,
};

const coachMarkRenderTips = (
  message,
  hasButton,
  buttonText,
  onPress,
  accessibilityLabelForButton,
) => {
  return (
    <View>
      <AText
        text={message}
        textStyle={CoachMarkConstant.tipsText}
      />
      {
        hasButton ?
          <AButton.BoxRounded
            accessibilityLabel={accessibilityLabelForButton}
            title={buttonText}
            onPressFn={_.debounce(onPress, PREVENT_NEXT_COACH_MARK_TIMEOUT, debounceOptions)}
            customButtonStyle={CoachMarkConstant.tipsButton.buttonStyle}
          />
          : null
      }
    </View>
  );
};

export default function CoachMark(props: Props) {
  const {
    children, isCoachMark, visible, coachMarkNextTips, position, message, hasButton,
    buttonText, accessibilityLabel, accessibilityLabelForButton, customContentStyle,
    customContainerStyle, customChildrenStyle, enableChildrenInteraction, delay, onRequestClose,
  } = props;

  return (
    isCoachMark ?
      <Tips
        accessibilityLabel={accessibilityLabel}
        visible={visible}
        content={
          coachMarkRenderTips(
            message, hasButton, buttonText, coachMarkNextTips,
            accessibilityLabelForButton,
          )
        }
        tooltipContainerStyle={[CoachMarkConstant.tipContainer.tooltipContainerStyle,
          customContainerStyle]}
        style={[CoachMarkConstant.tipContainer.style, customContentStyle]}
        modalStyle={CoachMarkConstant.tipContainer.modalStyle}
        childrenStyle={customChildrenStyle}
        contentStyle={[CoachMarkConstant.tipContainer.contentStyle, customContentStyle]}
        tooltipArrowStyle={CoachMarkConstant.tipContainer.tooltipArrowStyle}
        position={position}
        delay={delay}
        enableChildrenInteraction={enableChildrenInteraction}
        onRequestClose={onRequestClose}
      >
        {children}
      </Tips>
      :
      children
  );
}

CoachMark.defaultProps = {
  coachMarkNextTips: null,
  position: 'bottom',
  hasButton: false,
  buttonText: translate('coachMark.default.buttonText'),
  accessibilityLabel: null,
  accessibilityLabelForButton: null,
  customContainerStyle: null,
  customContentStyle: null,
  customChildrenStyle: null,
  delay: 0,
  onRequestClose: null,
};