import React from 'react';

import Button from './Button';

import { post } from '../api';

export default class Post extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      attach : '',
      body: ''
    }
    this.fileinput = React.createRef();
    console.log(props)
  }
  submit = (event) => {
    if (event.preventDefault) event.preventDefault();
    const {attach, body} = this.state;
    const input = this.fileinput.current;
    post(body, attach ? input.files[0] : '')
      .then(response => {
        console.log(response)
        if (response.status === 200) {
          const msg = response.data.newMessage;
          console.log(msg)
          this.props.history.push(`/${this.props.visitor.uname}/${msg.mid}`);
        }
      }).catch(console.log);
  }
  attachChanged = (event) => {
    this.setState({
      attach: event.target.value
    })
  }
  bodyChanged = (event) => {
    this.setState({
      body: event.target.value
    })
  }
  render() {
    return (
    <article>
      <form id="postmsg">
        <p style={{ textAlign: 'left' }}>
          <b>Фото:</b> <span id="attachmentfile">
          <input style={{ width: '100%' }} type="file" name="attach" ref={this.fileinput} value={this.state.attach} onChange={this.attachChanged}/> <i>(JPG/PNG)</i></span>
        </p>
        <p>
          <textarea name="body" value={this.state.body} onChange={this.bodyChanged} className="newmessage" rows="7" cols="10" placeholder="*weather It's very cold today!"></textarea>
          <br/>
          <Button className="subm" onClick={this.submit}>POST</Button>
        </p>
      </form>
    </article>
    );
  }
}