import React, { forwardRef, useImperativeHandle, useRef } from 'react';
import { TextInput } from 'react-native';
import { PlatformOS } from '../../utils/index';
import { StyleSheet } from '../Theme';
import Toast from '../Toast';

interface FocusComponentProps {
  showToast?: boolean;
  errorMessage: string | undefined;
}

const styles = StyleSheet.create({
  focusIndicator: {
    position: 'absolute',
    width: 1,
    height: 1,
    zIndex: -1,
  },
});

const FocusComponent = forwardRef<TextInput, FocusComponentProps>(
  (props, ref) => {
    const { showToast, errorMessage } = props;
    const inputRef = useRef<TextInput>(null);

    const currentFocus = () => {
      inputRef.current?.blur?.();
      if (showToast && errorMessage) {
        // 鸿蒙toast消失会，会重新foucs，这里做延迟处理
        if (PlatformOS.isHarmony) {
          requestAnimationFrame(() => {
            Toast(errorMessage);
          });
        } else {
          Toast(errorMessage);
        }
      }
    };

    useImperativeHandle(
      ref,
      () => {
        return {
          ...inputRef.current,
          focus: () => inputRef.current?.focus(),
          blur: () => inputRef.current?.blur(),
        } as TextInput;
      },
      []
    );

    return (
      <TextInput
        ref={inputRef}
        onFocus={currentFocus}
        style={styles.focusIndicator}
        selectionColor={'#0000'}
        // @ts-ignore
        showSoftInputOnFocus={false}
      />
    );
  }
);

export default FocusComponent;