// withHooks

import { LibComponent } from 'esoftplay/cache/lib/component/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { createTimeout } from 'esoftplay/timeout';
import React from 'react';
import { TextInput, View } from 'react-native';


export interface EventInput_rectangleArgs {
  
}
export interface EventInput_rectangleProps {
  icon?: string,
  label?: string,
  placeholder?: string,
  mask?: string,
  maskFrom?: 'start' | 'end',
  suffix?: string,
  onPress?: () => void,
  helper?: string
  allowFontScaling?: boolean,
  autoCapitalize?: "none" | "sentences" | "words" | "characters",
  autoCorrect?: boolean,
  autoFocus?: boolean,
  blurOnSubmit?: boolean,
  caretHidden?: boolean,
  contextMenuHidden?: boolean,
  defaultValue?: string,
  editable?: boolean,
  inactive?: boolean,
  keyboardType?: "default" | "email-address" | "numeric" | "phone-pad",
  maxLength?: number,
  multiline?: boolean,
  onSubmitEditing?: () => void,
  onChangeText?: (text: string) => void,
  placeholderTextColor?: string,
  returnKeyType?: "done" | "go" | "next" | "search" | "send",
  secureTextEntry?: boolean,
  selectTextOnFocus?: boolean,
  selectionColor?: string,
  style?: any,
  inputStyle?: any,
  value?: string,
}

export interface EventInputState {
  hasFocus: boolean,
  error?: string,
  helper?: string
}


export interface LibInputState {
  hasFocus: boolean,
  error?: string,
  helper?: string
}
export default class m extends LibComponent<EventInput_rectangleProps, LibInputState> {
  text: string
  ref: any
  constructor(props: EventInput_rectangleProps) {
    super(props);
    this.state = { hasFocus: false }
    this.text = ''
    this.ref = React.createRef()
    this.getText = this.getText.bind(this);
    this.mask = this.mask.bind(this);
    this.unmask = this.unmask.bind(this);
    this.setError = this.setError.bind(this);
    this.clearError = this.clearError.bind(this);
    this.setHelper = this.setHelper.bind(this);
    this.clearHelper = this.clearHelper.bind(this);
    this.getTextMasked = this.getTextMasked.bind(this);
  }

  getText(): string {
    return this.unmask(this.text)
  }

  getTextMasked(): string {
    return this.text
  }

  focus(): void {
    this.ref.focus()
  }

  blur(): void {
    this.ref.blur()
  }

  setHelper(msg: string): void {
    this.setState({ helper: msg })
  }

  clearHelper(): void {
    this.setState({ helper: undefined })
  }

  setError(msg: string): void {
    this.setState({ error: msg })
  }

  clearError(): void {
    this.setState({ error: undefined })
  }

  mask(text: string): string {
    let _text = text
    let { mask, maskFrom } = this.props
    if (mask) {
      if (!maskFrom) maskFrom = 'start'
      let rMask = mask.split("")
      let rText = this.unmask(_text).split("")
      if (maskFrom == 'end') {
        rMask = [...rMask.reverse()]
        rText = [...rText.reverse()]
      }
      let maskedText = ''
      var _addRange = 0
      var _addMaskChar = ''
      for (let i = 0; i < rMask.length; i++) {
        const iMask = rMask[i];
        if (iMask == '#') {
          if (rText[i - _addRange] != undefined) {
            maskedText += _addMaskChar + rText[i - _addRange]
          }
          else {
            break
          }
          _addMaskChar = ''
        }
        else {
          _addMaskChar += iMask
          _addRange++
        }
      }
      if (maskFrom == 'end') {
        maskedText = maskedText.split('').reverse().join('')
      }
      this.ref.setNativeProps({ text: maskedText })
      return maskedText
    }
    return _text
  }

  unmask(text: string): string {
    let _text = text
    let { mask } = this.props
    if (mask) {
      let masks = mask.match(/((?!\#).)/g)
      if (masks) {
        for (let i = 0; i < masks.length; i++) {
          _text = _text.replace(new RegExp(LibUtils.escapeRegExp(masks[i]), 'g'), '')
        }
      }
      return _text
    }
    return _text
  }

  setText(text: string): void {
    if (this.ref) {
      this.ref.setNativeProps({ text: this.mask(text) })
      this.text = this.mask(text)
    }
  }

  componentDidUpdate(prevProps: EventInput_rectangleProps, prevState: EventInputState): void {
    if (this.ref) {
      this.ref.setNativeProps({ text: this.mask(this.text) })
    }
  }

  componentDidMount(): void {
    super.componentDidMount()
    const timeout = createTimeout()
    timeout.set(() => {
      if (this.props.defaultValue) {
        this.setText(this.props.defaultValue)
      }
      timeout.clear()
    }, 300);
  }

  render(): any {
    const { error } = this.state
    return (
      <View pointerEvents={this.props.editable == false ? "none" : "auto"} style={[{ height: 40, borderRadius: 1, marginTop: 12, backgroundColor: "#ffffff", borderWidth: 1, borderColor: "#c5c5c5", flexDirection: 'row', alignItems: 'center', paddingHorizontal: 9 }, this.props.style]} >
        <TextInput
          ref={(r) => this.ref = r}
          placeholder={this.props.placeholder}
          placeholderTextColor='#e5e5e5'
          maxLength={this.props.mask ? this.props.mask.length : undefined}
          {...this.props}
          onChangeText={(e) => {
            this.text = this.mask(e)
            if (error != undefined)
              this.clearError()
            if (this.props.onChangeText) this.props.onChangeText(e)
          }}
          style={[{ flex: 1, fontFamily: "SFProText", fontSize: 12, color: "#000", marginRight: 15 }, this.props.inputStyle]}
        />
      </View>
    )
  }
}