import { useState } from 'react';
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';

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

import { post, update } from '../api';
import { useVisitor } from './VisitorContext';
import { Helmet } from 'react-helmet';

/**
 *
 */
export default function Post() {
  const location = useLocation();
  const navigate = useNavigate();
  const [visitor] = useVisitor();
  let draftMessage = (location.state || {}).data || {};
  let [draft, setDraft] = useState(draftMessage.body);
  let params = useSearchParams();
  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;
          navigate(`/${visitor.uname}/${msg.mid}`);
        }
      }).catch(console.log);
  };
  let appendTag = (tag) => {
    setDraft(prevDraft => {
      return `${prevDraft || ''} *${tag} `;
    });
  };
  return (
    <div className="msg-cont">
      <Helmet>
        <title>Post</title>
      </Helmet>
      <MessageInput rows={7} text={params.body || draft || ''} data={{}} 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>
  );
}