{"size": 3667, "ext": "js", "max_stars_repo_path": "shared/chat/conversation/input.native.js", "max_stars_repo_name": "acidburn0zzz/client", "max_stars_repo_stars_event_min_datetime": "2017-03-10T17:53:37.000Z", "max_stars_repo_stars_event_max_datetime": "2017-03-10T17:53:37.000Z", "max_issues_repo_path": "shared/chat/conversation/input.native.js", "max_issues_repo_name": "acidburn0zzz/client", "max_issues_repo_issues_event_min_datetime": "2022-02-10T19:07:39.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-10T19:07:39.000Z", "max_forks_repo_path": "shared/chat/conversation/input.native.js", "max_forks_repo_name": "Acidburn0zzz/client", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 26.1928571429, "max_line_length": 100, "alphanum_fraction": 0.6083992364}
// @flow
/* eslint-env browser */
import React, {Component} from 'react'
import {Box, Icon, Input, Text} from '../../common-adapters'
import {globalMargins, globalStyles} from '../../styles'
import {isIOS} from '../../constants/platform'
import ImagePicker from 'react-native-image-picker'

import type {AttachmentInput} from '../../constants/chat'
import type {Props} from './input'

type State = {
  text: string,
}

class ConversationInput extends Component<void, Props, State> {
  _input: any;
  _fileInput: any;
  state: State;

  _setRef = r => {
    this._input = r
  }

  constructor (props: Props) {
    super(props)
    this.state = {text: this.props.defaultText}
  }

  componentDidUpdate (prevProps: Props) {
    if (!this.props.isLoading && prevProps.isLoading) {
      this.focusInput()
    }
  }

  componentWillReceiveProps (nextProps: Props) {
    if (this.props.editingMessage !== nextProps.editingMessage) {
      if (nextProps.editingMessage && nextProps.editingMessage.type === 'Text') {
        this.setState({text: nextProps.editingMessage.message.stringValue()})
        this.focusInput()
      }
    }
  }

  componentWillUnmount () {
    this.props.onUnmountText && this.props.onUnmountText(this.getValue())
  }

  focusInput = () => {
    this._input && this._input.focus()
  }

  getValue () {
    return this._input ? this._input.getValue() : ''
  }

  _onBlur = () => {
    if (this.props.editingMessage) {
      this.props.onShowEditor(null)
      this.setState({text: ''})
    }
  }

  _onSubmit = () => {
    if (this.state.text) {
      if (this.props.editingMessage) {
        this.props.onEditMessage(this.props.editingMessage, this.state.text)
      } else {
        this.props.onPostMessage(this.state.text)
      }
      this.setState({text: ''})
    }
  }

  _onChangeText = text => {
    this.setState({text})
  }

  _openFilePicker = () => {
    ImagePicker.showImagePicker({}, (response) => {
      const filename = isIOS ? response.uri.replace('file://', '') : response.path
      const conversationIDKey = this.props.selectedConversation
      if (!response.didCancel && conversationIDKey) {
        const input: AttachmentInput = {
          conversationIDKey,
          filename,
          title: response.fileName,
          type: 'Image',
        }
        this.props.onAttach([input])
      }
    })
  }

  render () {
    // Auto-growing multiline doesn't work smoothly on Android yet.
    const multilineOpts = isIOS ? {rowsMax: 3, rowsMin: 1} : {rowsMax: 2, rowsMin: 2}

    return (
      <Box style={{...globalStyles.flexBoxColumn}}>
        <Box style={{...globalStyles.flexBoxRow, alignItems: 'flex-start'}}>
          <Input
            autoCorrect={true}
            autoFocus={true}
            small={true}
            style={styleInput}
            ref={this._setRef}
            hintText='Write a message'
            hideUnderline={true}
            onChangeText={this._onChangeText}
            onBlur={this._onBlur}
            value={this.state.text}
            multiline={true}
            {...multilineOpts}
          />
          <Box style={styleRight}>
            {!this.state.text && <Icon onClick={this._openFilePicker} type='iconfont-attachment' />}
            {!!this.state.text && <Text type='BodyBigLink' onClick={this._onSubmit}>Send</Text>}
          </Box>
        </Box>
      </Box>
    )
  }
}

const styleInput = {
  flex: 1,
  marginLeft: globalMargins.tiny,
  marginRight: globalMargins.tiny,
  marginTop: globalMargins.tiny,
}

const styleRight = {
  alignSelf: 'center',
  marginRight: globalMargins.tiny,
  marginTop: globalMargins.tiny,
}

export default ConversationInput
