import { useEffect, useState, useCallback } from 'react';
import { useLocation, useParams } from 'react-router-dom';

import Comment from './Comment';
import Message from './Message';
import MessageInput from './MessageInput';
import Spinner from './Spinner';

import { getMessages, comment, update, post } from '../api';
import { useVisitor } from './VisitorContext';
import { Helmet } from 'react-helmet';
/**
 * @type { import('../api').Message }
 */
const emptyMessage = {};

/**
 * Thread component
 * @param {import('react').PropsWithChildren<{}>} props
 */
export default function Thread(props) {
  const location = useLocation();
  const params = useParams();
  const [message, setMessage] = useState((location.state || {}).data || {});
  const [replies, setReplies] = useState([]);
  const [loading, setLoading] = useState(false);
  const [active, setActive] = useState(0);

  const [editing, setEditing] = useState(emptyMessage);
  const [visitor] = useVisitor();
  const [hash] = useState(visitor.hash);
  const { mid } = params;

  let loadReplies = useCallback(() => {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
    setReplies([]);
    setLoading(true);
    let params = {
      mid: mid
    };
    params.hash = hash;
    getMessages('/api/thread', params)
      .then(response => {
        let updatedMessage = response.data.shift();
        if (!message.mid) {
          setMessage(updatedMessage);
        }
        setReplies(response.data);
        setLoading(false);
        setActive(0);
      }
      ).catch(ex => {
        console.log(ex);
      });
  }, [hash, message.mid, mid]);

  let postComment = async ({ body, attach }) => {
    try {
      let res = editing.rid ? await update(mid, editing.rid, body)
        : await comment(mid, active, body, attach);
      let result = res.status == 200;
      if (result) {
        setEditing(emptyMessage);
      }
      return result;
    } catch (e) {
      console.error(e);
    }
    return false;
  };

  let startEditing = (reply) => {
    setActive(reply.to.rid || 0);
    setEditing(reply);
  };

  useEffect(() => {
    setActive(0);
    loadReplies();
  }, [loadReplies]);
  useEffect(() => {
    let onReply = (json) => {
      const msg = JSON.parse(json.data);
      if (msg.mid == message.mid) {
        setReplies(oldReplies => {
          return [...oldReplies, msg];
        });
        setActive(prev => {
          return prev + 1;
        });
      }
    };
    if (props.connection.addEventListener && message.mid) {
      props.connection.addEventListener('msg', onReply);
    }
    return () => {
      if (props.connection.removeEventListener && message.mid) {
        props.connection.removeEventListener('msg', onReply);
      }
    };
  }, [props.connection, message.mid]);

  const loaders = Math.min(message.replies || 0, 10);
  const pageTitle = `${params.user} ${message && message.tags || 'thread'}`;
  /** @type { import('./Message').ToggleSubscriptionCallback } */
  const handleSubsciptionToggle = (message) => {
    if (message.subscribed) {
     if (confirm('Unsubscribe?')) {
        post(`U #${message.mid}`).then((response) => {
          if (response.status === 200) {
            setMessage({...message, subscribed: false});
          }
        }).catch(console.error);
     }
    } else {
      if (confirm('Subscribe?')) {
        post(`S #${message.mid}`).then((response) => {
          if (response.status === 200) {
            setMessage({...message, subscribed: true});
          }
        }).catch(console.error);
      }
    }
  };
  return (
    <>
      <Helmet>
        <title>{pageTitle}</title>
      </Helmet>
      {
        message.mid ? (
          <Message key={message.mid} data={message} isThread={true} onToggleSubscription={handleSubsciptionToggle}>
            {active === (message.rid || 0) && visitor.uid > 0 && <MessageInput data={message} text={editing.body || ''} onSend={postComment}>Write a comment...</MessageInput>}
          </Message>
        ) : (
          <Spinner />
        )
      }
      {
        message.replies && <ul id="replies">
          {
            !loading ? replies.map((msg) => (
              <li id={msg.rid} key={msg.rid}>
                <Comment msg={msg} draft={msg.rid === editing.replyto ? editing.body : ''} active={active} setActive={setActive} onStartEditing={startEditing} postComment={postComment} />
              </li>
            )) : (
              <>
                {
                  Array(loaders).fill().map((it, i) => <Spinner key={i} />)
                }
              </>
            )
          }
        </ul>
      }
    </>
  );
}