import React, {useCallback, useEffect, useState} from 'react';
import {
  View,
  Text,
  ViewStyle,
  Platform,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';
import BackgroundTimer from 'react-native-background-timer';

interface ButtonProps {
  onPress?: () => void;
  resendOtpCount?: number;
  otpTitle?: string;
  resendOtpTimer: number;
  disabled?: boolean;
  buttonStyle?: ViewStyle;
  containerStyle?: ViewStyle;
}

export const ResendOTPButton: React.FC<ButtonProps> = ({
  resendOtpCount,
  resendOtpTimer,
  buttonStyle,
  containerStyle,
  onPress,
  otpTitle = 'Resend OTP in',
}) => {
  const [otpResendCount, setOtpResendCount] = useState<number | undefined>(
    resendOtpCount,
  );
  const [timer, setTimer] = useState<number>(resendOtpTimer);

  const tick = useCallback(() => {
    if (timer !== 0) {
      setTimer(timer - 1);
    }
  }, [timer]);

  useEffect(() => {
    if (Platform.OS === 'ios') {
      BackgroundTimer.start();
    }
    const timerID = BackgroundTimer.setInterval(() => tick(), 1000);
    return () => BackgroundTimer.clearInterval(timerID);
  }, [tick]);

  return (
    <View style={[styles.row, containerStyle]}>
      <Text>
        {`${otpTitle} ${
          otpResendCount !== undefined ? `(${otpResendCount.toString()})` : ''
        }`}
        {' : '}
      </Text>
      <TouchableOpacity
        disabled={otpResendCount === 0 || timer > 0}
        onPress={() => {
          onPress?.();
          setTimer(resendOtpTimer);
          if (otpResendCount && otpResendCount !== 0) {
            const newLocal = otpResendCount - 1;
            setOtpResendCount(newLocal);
          }
        }}>
        <Text style={buttonStyle}>{timer === 0 ? 'Resend' : timer}</Text>
      </TouchableOpacity>
      {timer ? <Text> sec</Text> : null}
    </View>
  );
};
const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
  },
});