import React, { useState, useEffect } from 'react';
import { Launcher } from 'react-chat-window';

export default function Chatbox() {
  const [state, setState] = useState({
    messageList: [],
    newMessagesCount: 0,
    isOpen: false,
    fileUpload: true,
  });

  function onMessageWasSent(message) {
    console.log(localStorage.getItem("username"));
    if (localStorage.getItem("username") == null) return;
    let temp = JSON.parse(JSON.stringify(message));
    temp.author = localStorage.getItem("username");
    try {
    const response = fetch("https://jp-backend-kc80.onrender.com/api/messages", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(temp),
      });
      const data = response.json();
    }
    catch(error)
    {

    }
    setState(state => ({
      ...state,
      messageList: [...state.messageList, message]
    }));
  }

//   function onFilesSelected(fileList) {
//     const objectURL = window.URL.createObjectURL(fileList[0]);

//     setState(state => ({
//       ...state,
//       messageList: [
//         ...state.messageList,
//         {
//           type: 'file', author: 'me',
//           data: {
//             url: objectURL,
//             fileName: fileList[0].name,
//           }
//         }
//       ]
//     }));
//   }

  function sendMessage(text) {
    if (text.length > 0) {
      const newMessagesCount = state.isOpen ? state.newMessagesCount : state.newMessagesCount + 1;

      setState(state => ({
        ...state,
        newMessagesCount: newMessagesCount,
        messageList: [
          ...state.messageList,
          {
            author: 'them',
            type: 'text',
            data: { text }
          }
        ]
      }));
    }
  }

  // function onClick() {
  //   fetch('https://jp-backend-kc80.onrender.com/api/messages', {
  //     // mode: 'no-cors',
  //     method: 'GET',
  //     headers: {
  //       Accept: 'application/json',
  //     },
  //   },
  //   ).then(response => {
  //     if (response.ok) {
  //       response.json().then(json => {
  //         const username = localStorage.getItem("username");
  //         json.forEach(element => {
  //             if (element.author == username)
  //             {
  //                 element.author = "me";
  //             }
  //             else
  //             {
  //                 console.log(element.author + ": " + element.data.text);
  //                 element.data.text = element.author + ": " + element.data.text;
  //                 element.author = "them";
  //             }
  //         });
  //         const newMessagesCount = state.isOpen ? state.newMessagesCount : json.length - state.newMessagesCount;
  //         if (json.length - localStorage.getItem("previousamount") == 0 && localStorage.getItem("previousamount") != null) return;
  //         localStorage.setItem("previousamount", json.length);
  //           setState(state => ({
  //               ...state,
  //               newMessagesCount: newMessagesCount,
  //               messageList: json
  //             }));
  //         // sendMessage(json.data.text);
  //       });
  //     }
  //   });
  // }

  useEffect(() => {
    const interval = setInterval(() => {
        fetch('https://jp-backend-kc80.onrender.com/api/messages', {
            // mode: 'no-cors',
            method: 'GET',
            headers: {
              Accept: 'application/json',
            },
          },
          ).then(response => {
            if (response.ok) {
              response.json().then(json => {
                const username = localStorage.getItem("username");
                json.forEach(element => {
                    if (element.author == username)
                    {
                        element.author = "me";
                    }
                    else
                    {
                        console.log(element.author + ": " + element.data.text);
                        element.data.text = element.author + ": " + element.data.text;
                        element.author = "them";
                    }
                });
                const newMessagesCount = state.isOpen ? state.newMessagesCount : json.length - state.newMessagesCount;
                console.log(state.newMessagesCount);
                if (json.length - localStorage.getItem("previousamount") == 0 && localStorage.getItem("previousamount") != null) return;
                localStorage.setItem("previousamount", json.length);
                  setState(state => ({
                      ...state,
                      newMessagesCount: newMessagesCount,
                      messageList: json
                    }));
                // sendMessage(json.data.text);
              });
            }
          });
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>

      <Launcher
        agentProfile={{
          teamName: 'Journeypoint Chat',
          imageUrl: "https://i.postimg.cc/ncS81KRC/Journey-Point.png"
        }}
        onMessageWasSent={onMessageWasSent}
        // onFilesSelected={onFilesSelected}
        messageList={state.messageList}
        newMessagesCount={state.newMessagesCount}
        // onClick={onClick}
        // isOpen={state.isOpen}
        showEmoji
        // fileUpload={state.fileUpload}
        // pinMessage={{
        //   imageUrl: '../../images/JourneyPoint.png',
        // }}
      />
    </div>
  );
}