//@flow
import React, { Component } from 'react';
import TextInput from '../TextInput';
import ListItem from '../ListItem';

export default class Mult extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.value,
    };
  }

  componentWillReceiveProps(nextProps : Readonly<P>, nextContext : any) : void {
    console.log('componentWillReceiveProps', nextProps.value);

    if (nextProps.value !== this.state.value) {
      this.setState({
        value: nextProps.value,
      });
    }
  }

  render() {
    const {
      maxLength,
      keyboardType,
      onChangeText,
      placeholder,
      text,
      onEndEditing,
    } = this.props;
    return (
      <ListItem
        style={{
          borderBottomColor: '#ccc',
        }}
        text={text}
      >
        <TextInput
          numberOfLines={1}
          underlineColorAndroid="transparent"
          maxLength={maxLength}
          value={this.state.value}
          keyboardType={keyboardType}
          onChangeText={(value) => {
            this.setState({
              value,
            });
            onChangeText(value);
          }}
          placeholder={placeholder}
          onEndEditing={onEndEditing}
        />
      </ListItem>
    );
  }
}
