import React, { Fragment, useContext, useEffect, useState } from 'react';
import RequestDetailsService from '../../services/request-details.service';
import './chat-history.scss';
import { IChatItems, IHistoricalFulfillment, IMatchedIntents, IRequestData } from '../../models';
import { EntityHighlighterService } from '../../services/entity-highlight-service';
import { RequestContext } from '../../../../pages/request-details/Request.context';
import { isJson } from '../../../../core/utils/string.util';
import JsonViewer from '../../../../core/components/json-viewer/JsonViewer';

const ChatHistory = (props: IChatHistoryProps) => {
  const {
    ChatSimulatorView,
    convId,
    chats,
    historicalFulfillments,
    content,
    addToAnnotationWorkbench
  } = props;
  const { botId } = useContext(RequestContext);

  const [chatItems, setChatItems] = useState<IChatItems[]>([]);
  const [jsonContent, setJsonContent] = useState<Object>();
  const [plainTextContent, setPlainTextContent] = useState<string>();
  const [chatView, setChatView] = useState();
  const [elemText, setElemText] = useState();

  const handleAnnotatePhrase = (phrase: string) => {
    addToAnnotationWorkbench(phrase);
  }

  const processChatData = (chatData: IChatItems[]) => {
    if (!chatData?.length) {
      return;
    }
    let fulfillmentAttached = false;
    chatData.forEach((chatItem) => {
      const isAnnotatable = chatItem.questionType === 'UserInput';
      const isNotApplicable = chatItem.questionType === 'UserClick';
      let intents: IMatchedIntents[] = [];

      if (chatItem.matchedIntents) {
        const matchedIntents = Object.values(chatItem.matchedIntents).sort((ob1, ob2) => ob2.score - ob1.score);
        const matchedIntent = matchedIntents?.[0];
        if(matchedIntent?.score && matchedIntent?.intent) {
          intents = [matchedIntent];
        }
      }
      
      const annotationData: any = {
        isAnnotatable: false, //
        isNotApplicable,
        isNoIntentMatch: isAnnotatable && (!intents?.length),
        hasAnnotation: isAnnotatable && intents?.length,
        intents,
        hasAttachments: chatItem.isEmailContent ? chatItem.attachements : false,
        annotationHandler: () => handleAnnotatePhrase(chatItem.question)
      };

      if (chatItem?.answers?.length && !fulfillmentAttached) {
        fulfillmentAttached = true;
        annotationData.fulfillments = historicalFulfillments;
      }

      chatItem.annotationData = annotationData;
    });
  }

  const processContentData = (content: string) => {
    if(isJson(content)) {
      setJsonContent(JSON.parse(content));
    } else {
      setPlainTextContent(content);
    }
  }

  useEffect(() => {
    if(content) {
      processContentData(content);
    }
  }, [content]);

  useEffect(() => {
    if(chats?.length) {
      const chatList = [...chats]
      processChatData(chatList);
      setChatItems(chatList);
    }
  }, [chats, historicalFulfillments]);

  useEffect(() => {
    if (chatItems?.length) {
      const chatPreview = new ChatSimulatorView({
        el: document.getElementById(`chatHistory${convId}`),
        renderChatItemTime: true,
        chatItems
      });
      setChatView(chatPreview);
    }
  }, [chatItems]);

  useEffect(() => {
    const entities = Array.from(EntityHighlighterService.getAddedEntities());
    if (!entities.length || !chatView) {
      return;
    }
    const element = document.getElementById(`chatHistory${convId}`);
    const questionElements = element?.querySelectorAll('.chat-question');
    if (questionElements?.length) {
      const elemTexts = {} as any;
      questionElements.forEach((elem, index) => {
        elem.setAttribute("data-id", `chat-question-${index + 1}`);
        elemTexts[elem.innerHTML] = [`chat-question-${index + 1}`];
      });
      setElemText(elemTexts);
    }
  }, [chatView]);

  useEffect(() => {
    if (elemText) {
      const hightlighEntities = async () => {
        const texts = Object.keys(elemText);
        const entities = Array.from(EntityHighlighterService.getAddedEntities());
        const highlightedEntities = await RequestDetailsService.entitiesHighlight(texts as string[], entities, botId);
        highlightedEntities?.forEach(highlightOb => {
          const replacers = {} as any;
          let highlightSourceInput = highlightOb.input;
          let highlightInput = highlightSourceInput;
          highlightOb?.values.forEach(({ id, spos, epos }) => {
            const color = EntityHighlighterService.getEntity(id);
            const substr = highlightOb.input.slice(spos, epos);
            replacers[substr] = `<span style='color: ${color}'>${substr}</span>`;
          });
          for (const key in replacers) {
            highlightInput = highlightInput.replace(key, replacers[key]);
          }
          const query = `[data-id=${elemText[highlightSourceInput]}]`;
          const questionElem = document.querySelector(query);
          if (questionElem) {
            questionElem.innerHTML = highlightInput;
          }
        });
      }
      hightlighEntities();
    }

  }, [elemText]);

  return (
    <Fragment>
      {
        ((chats?.length && (
          <div className='chat-history-wrapper'>
            <div id={`chatHistory${convId}`}></div>
          </div>
        )) || (!convId && content && (
          <div className='chat-history-wrapper'>
            {(jsonContent ? (
              <JsonViewer jsonData={jsonContent as any}/>
            ) : (
              <div className="plain-text-content" dangerouslySetInnerHTML={{__html: plainTextContent as string}}></div>
            ))}
          </div>
        )))
      }
    </Fragment>
    
  )
}

export default ChatHistory;

export interface IChatHistoryProps {
  ChatSimulatorView: any;
  request?: IRequestData;
  convId: number;
  chats?: IChatItems[];
  content?: string;
  historicalFulfillments: IHistoricalFulfillment[];
  addToAnnotationWorkbench: (phrase: string) => void;
}