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 = async ({ attach, body }) => {
    try {
      const res = draftMessage.mid ? await update(draftMessage.mid, 0, body) : await post(body, attach);
      let result = res.status == 200;
      if (result) {
        const msg = res.data.newMessage;
        navigate(`/${visitor.uname}/${msg.mid}`);
      }
      return result;
    } catch (e) {
      console.log(e);
    }
    return false;
  };
  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>
  );
}