import React from 'react';

import ReactRouterPropTypes from 'react-router-prop-types';
import { UserType } from './Types';

import * as qs from 'query-string';

import MessageInput from './MessageInput';

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

export default class Post extends React.Component {
  constructor(props) {
    super(props);
    let params = qs.parse(window.location.search);
    this.state = {
      attach: '',
      body: params.body || ''
    }
    this.fileinput = React.createRef();
    console.log(props);
  }
  postMessage = (template) => {
    const { attach, body } = template;
    post(body, attach)
      .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 (
      <div className="msgs">
        <article className="msg-cont">
          <MessageInput rows="7" text={this.state.body} data={{ mid: 0, timestamp: '0' }} onSend={this.postMessage}>
            *weather It is very cold today!
      </MessageInput>
        </article>
      </div>
    );
  }
}

Post.propTypes = {
  history: ReactRouterPropTypes.history.isRequired,
  visitor: UserType
};