import React, { useState } from 'react';
import { useLocation, useHistory } from 'react-router-dom';

import qs from 'qs';

import Button from './Button';
import MessageInput from './MessageInput';

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

/**
 * @param {{visitor: import('../api').User}} props
 */
export default function Post({ visitor }) {
  const location = useLocation();
  const history = useHistory();
  let draftMessage = (location.state || {}).draft || {};
  let [draft, setDraft] = useState(draftMessage.body);
  let params = qs.parse(window.location.search.substring(1));
  let postMessage = (template) => {
    const { attach, body } = template;
    const postAction = draftMessage.mid ? update(draftMessage.mid, 0, body) : post(body, attach);
    postAction
      .then(response => {
        if (response.status === 200) {
          const msg = response.data.newMessage;
          history.push(`/${visitor.uname}/${msg.mid}`);
        }
      }).catch(console.log);
  };
  let appendTag = (tag) => {
    setDraft(prevDraft => {
      return `${prevDraft || ''} *${tag} `;
    });
  };
  return (
    <div className="msg-cont">
      <MessageInput rows="7" text={params.body || draft || ''} data={{ mid: 0, timestamp: '0' }} onSend={postMessage}>
        *weather It is very cold today!
      </MessageInput>
      {
        visitor.tagStats &&
        <div style={{ padding: '6px' }}>
          <p>Tags:</p>
          {
            visitor.tagStats.map(t => {
              return (<Button key={t.tag} onClick={() => { appendTag(t.tag); }}>{t.tag}</Button>);
            })
          }
        </div>
      }
    </div>
  );
}