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-async'

/**
 *
 */
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>
  )
}