import React, { Component } from 'react'
import { Input, Button, Form, Upload } from 'antd'
import Messages from './Messages'
import './Dialog.scss'

const { TextArea } = Input

class Dialog extends Component {
  state = {
    text: '',
    fileList: [],
  }

  handleTextChange = (e) => {
    this.setState({ text: e.target.value })
  }

  handleSubmit = (e) => {
    e.preventDefault()
    const { text, fileList } = this.state
    const { id } = this.props
    if (text) this.props.sendMessage(id, text)
    if (fileList.length > 0) {
      const filePaths = [...new Set(fileList.map(x => x.path))]
      this.props.sendFiles(id, filePaths)
    }
    this.setState({
      text: '',
      fileList: [],
    })
  }

  handleFileRemove = (file) => {
    this.setState(({ fileList }) => {
      const index = fileList.indexOf(file)
      const newFileList = fileList.slice()
      newFileList.splice(index, 1)
      return {
        fileList: newFileList,
      }
    })
  }

  handleFileAdd = (file) => {
    this.setState(({ fileList }) => ({
      fileList: [...fileList, file],
    }))
    return false
  }

  render() {
    const { messages, username, online } = this.props
    const { text, fileList } = this.state
    return (
      <div styleName="dialog">
        <Messages messages={messages} username={username} />
        <div>
          {this.props.children}
        </div>
        <Upload
          multiple
          onRemove={this.handleFileRemove}
          beforeUpload={this.handleFileAdd}
          fileList={fileList}
        >
          <Button shape="circle" icon="paper-clip" />
        </Upload>
        <Form onSubmit={this.handleSubmit}>
          <TextArea rows={4} value={text} onChange={this.handleTextChange} styleName="text" />
          <div styleName="send-btn-div">
            <Button
              type="primary"
              htmlType="submit"
              disabled={!online || (!text && fileList.length <= 0)}
            >
              Send
            </Button>
          </div>
        </Form>
      </div>
    )
  }
}

export default Dialog

@@ -559,20 +559,8 @@
 s = 
-%5B...new Set(
 file
@@ -584,10 +584,8 @@
 ath)
-)%5D
 %0A   
@@ -1025,55 +1025,180 @@
  =%3E 
-(%7B%0A      fileList: %5B...fileList, file%5D,
+%7B%0A      if (fileList.map(x =%3E x.path).indexOf(file.path) === -1) %7B%0A        return %7B%0A          fileList: %5B...fileList, file%5D,%0A        %7D%0A      %7D%0A      return fileList
 %0A    %7D)
-)
+%0A
 %0A   

check unique dynamically