import PincodeInput from "react-native-pincode-input";

export default class View extends React.Component {

  pincodeInput = React.createRef();

  shakePincode() {
    this.pincodeInput.shake();
  }

  handleOnTextChange(pin) {
    const { previousPin } = this.props;
    this.setState({ pin });
    if (pin !== previousPin) {
      this.shakePincode();
    }
  }

  render() {
    const { pin } = this.state;
    return <PincodeInput
        ref={pincodeInput => this.pincodeInput = pincodeInput}
        length={4}
        containerStyle={{
          display: "flex",
          width: "100%",
          height: 200,
          justifyContent: "center"
        }}
        circleContainerStyle={{
          paddingHorizontal: 32
        }}
        circleEmptyStyle={{
          borderWidth: 1,
          borderColor: "#424242"
        }}
        circleFilledStyle={{
          backgroundColor: "#424242"
        }}
        pin={pin}
        onTextChange={this.handleOnTextChange}
      />
  }
}