/* eslint-disable no-useless-concat */
/* eslint-disable no-loop-func */
import React, { useState, useEffect } from 'react';
import $ from 'jquery';
import './style.css';
import HomeIcon from '@mui/icons-material/Home';
import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
import MicIcon from '@mui/icons-material/Mic';
import SendIcon from '@mui/icons-material/Send';
// import Sent from '../../assets/audio/Instagram - Sound Sms Message Tone Notification.mp3';

let message_count = 1;
let time_cat = '';

let suggestions = [];
let checkDict = {};
// let ress;
let divNo = 1;
let divOut;
let trace = 0;
let searchWrapper;
let inputBox;
let suggBox;

const ChatBotUI = ({ ws, Style }) => {
  const [inputValue, setInputValue] = useState('');
  const [otherInput, setOtherInput] = useState('');
  // audio sound
  const [audio] = useState(new Audio(Style.audio));

  useEffect(() => {
    document.documentElement.style.setProperty(
      '--my-favorite-color',
      Style.iconColor ? Style.iconColor : '#2e489e'
    );
    document.documentElement.style.setProperty(
      '--chat-header-color',
      Style.chatHeader ? Style.chatHeader : '#b2dd4c'
    );
    document.documentElement.style.setProperty(
      '--text-color',
      Style.textColor ? Style.textColor : '#00000'
    );
  }, [Style]);

  //Websocket Object
  useEffect(() => {
    // document.getElementById("button1").disabled = true;
    searchWrapper = document.querySelector('.search-input');
    inputBox = searchWrapper.querySelector('input');
    suggBox = searchWrapper.querySelector('.autocom-box');
    //Websocket On Message
    ws.onmessage = (message) => {
      if (message_count === 1) {
        let day = new Date();
        let hr = day.getHours();
        if (hr >= 0 && hr < 12) {
          time_cat = 'Good Morning!';
        } else if (hr === 12) {
          time_cat = 'Good Noon!';
        } else if (hr >= 12 && hr <= 17) {
          time_cat = 'Good Afternoon!';
        } else {
          time_cat = 'Good Evening!';
        }
      }
      message_count = message_count + 1;
      document.getElementById('client').disabled = true;
      document.getElementById('client').value = '';
      document.getElementById('otherInput').value = '';
      document.getElementById('button1').disabled = true;
      document.getElementById('echo').style.display = 'block';
      document.getElementById('echo').style.display = 'None';
      console.log('Data Received...');
      document.getElementById('two').style.display = 'inline';
      document.getElementById('four').style.display = 'inline';
      try {
        let obj = JSON.parse(message.data);
        document.getElementById('client').disabled = true;
        document.getElementById('button1').disabled = true;
        if (
          obj.header[0] === 'Layer:1.15' ||
          obj.header[0] === 'Layer-2.1' ||
          obj.header[0] === 'Layer-4.0' ||
          obj.header[0] === 'Layer-4.1' ||
          obj.header[0] === 'Layer-6.0'
        ) {
          set_suggestions(obj.options);
          set_searchbar();
          set_text(obj.header[1]);
          audio.play();
        } else if (obj.header[0] === 'multiCheck') {
          let header = obj.header;
          let options = obj.options;
          let count = Object.keys(options).length;
          multiple(header, options, count);
          audio.play();
        } else if (obj.header[0] === 'modalHand') {
          modalHandler(obj);
          audio.play();
        } else if (obj.header[0] === 'contextMulDropDown') {
          setMultiSelDropdown(obj.options);
          audio.play();
        } else {
          let header = obj.header;
          let options = obj.options;
          let count = Object.keys(options).length;
          set_header_1(header, options, count);
          audio.play();
        }
      } catch {
        if (message.data === '----------------------------') {
          set_text(message.data);
          document.getElementById('client').disabled = true;
          set_searchbar();
          audio.play();
        } else {
          set_text(message.data);
          audio.play();
          document.getElementById('client').placeholder = 'Enter your message.';
          document.getElementById('client').disabled = false;
          document.getElementById('button1').disabled = false;
        }
      } finally {
        // console.log("On message Finally");
      }
    };
  });

  function modalHandler(obj) {
    let header = obj.header;
    let options = obj.options;
    let desc = obj.description;
    let prec = obj.precaution;
    let depart = obj.department;
    let count = Object.keys(options).length;
    let div = document.createElement('div');
    div.className = 'server-message';
    let br = document.createElement('br');
    div.innerHTML = header[1];
    div.append(br);
    for (let i = 1; i <= count; i++) {
      let btn = document.createElement('button');
      btn.innerHTML = options[i];
      btn.classList.add('button1-option', header[0]);
      trace = header[0];
      if (i === 1) {
        btn.id = 'myBtn';
      } else {
        btn.id = 'btn';
      }
      btn.onClick = function () {
        if (this.id === 'myBtn') {
          document.getElementById('name').innerHTML = '';
          document.getElementById('description').innerHTML = '';
          document.getElementById('depart').innerHTML = '';
          document.getElementById('name2').innerHTML = '';
          document.getElementById('description2').innerHTML = '';
          document.getElementById('depart2').innerHTML = '';
          let leng = Object.keys(desc).length;
          for (let i = 1; i <= leng; i++) {
            if (i === 1) {
              document.getElementById('name').innerHTML += desc[i];
              document.getElementById('description').innerHTML += prec[i];
              document.getElementById('depart').innerHTML = depart[i];
            } else {
              document.getElementById('name2').innerHTML += desc[i];
              document.getElementById('description2').innerHTML += prec[i];
              document.getElementById('depart2').innerHTML = depart[i];
            }
          }
          myBot();
        } else {
          ws.send(this.innerHTML);
          let elems = document.getElementsByClassName(trace);
          for (let i = 0; i < elems.length; i++) {
            elems[i].disabled = true;
          }
        }
      };
      div.append(btn);
      document.getElementById('one').appendChild(div);
    }
  }

  function myBot() {
    // Get the modal
    let modal = document.getElementById('myModal');
    // Get the button that opens the modal
    // let btn = document.getElementById("myBtn");

    // Get the <span> element that closes the modal
    let span = document.getElementsByClassName('close')[0];

    //     When the user clicks the button, open the modal
    //    btn.onclick = function() {
    //      modal.style.display = "block";
    //    }
    modal.style.display = 'block';

    // When the user clicks on <span> (x), close the modal
    span.onclick = function () {
      modal.style.display = 'none';
    };

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function (event) {
      if (event.target === modal) {
        modal.style.display = 'none';
      }
    };
  }

  function modalBookingButton() {
    document.getElementById('client').value = 'booking';
    document.getElementById('myModal').style.display = 'none';
    sendInput();
  }

  function multiple(header, options, count) {
    document.getElementById('button1').disabled = false;
    let div = document.createElement('div');
    divHandler(divNo);
    div.setAttribute('id', divOut);
    div.className = 'server-message';
    let br = document.createElement('br');
    div.innerHTML = header[1];
    div.append(br);
    let all = [];
    for (let i = 1; i <= count; i++) {
      let btn = document.createElement('button');
      btn.innerHTML = options[i];
      btn.classList.add('button1-option', header[0], divOut);
      btn.setAttribute('value', options[i]);
      btn.setAttribute('id', options[i]);
      trace = header[0];
      btn.addEventListener('click', function () {
        let str = this.value;
        // let i = this.id;
        if (str === 'NONE') {
          all.length = 0;
          all.push(str);
          document.getElementById('client').value = all;
          $('.' + divOut).removeClass('actv-btn');
          $('.' + divOut)
            .last()
            .addClass('actv-btn');
          sendInput();
        } else {
          document.getElementById('client').disabled = true;
          if (all.includes(str)) {
            $(this).removeClass('actv-btn');
            let index = all.indexOf(str);
            all.splice(index, 1);
          } else {
            $(this).addClass('actv-btn');
            all.push(str);
          }
        }
        document.getElementById('client').value = all;
        document.getElementById('otherInput').value = all;
      });
      div.append(btn);
      document.getElementById('one').appendChild(div);
    }
  }

  function setMultiSelDropdown(options) {
    let count = Object.keys(options).length;
    let selectList = document.getElementById('selBox');
    document.getElementById('selBox').options.length = 0;
    for (let i = 1; i <= count; i++) {
      let option = document.createElement('option');
      option.value = options[i];
      option.text = options[i];
      selectList.appendChild(option);
    }
    $('#selDiv').show();
    $('#two').hide();
    $('#four').hide();
  }

  $('#bot').click(function () {
    let x = $('#selBox').val();
    ws.send(x);
    $('#selDiv').hide();
    $('#two').show();
    $('#four').show();
    let d = document.createElement('div');
    d.classList.add('client-message');
    let para = document.createElement('p');
    para.innerHTML = x;
    para.setAttribute('style', 'text-align:right');
    d.append(para);
    document.getElementById('one').appendChild(d);
  });

  function set_searchbar() {
    document.getElementById('sbar1').value = '';
    document.getElementById('sbar').style.display = 'inline';
    document.getElementById('two').style.display = 'None';
    document.getElementById('four').style.display = 'None';
    document.getElementById('autocomBox').innerHTML = '';
    document.getElementById('autocomBox').display = 'None';
    try {
      // let x = document.querySelector(".search-input");
      const x = $('.search-input');
      x.classList.remove('active');
    } catch {
      // console.log("serchbar catch")
    } finally {
      // console.log("serchbar finally ")
    }

    //        document.getElementById("button1").disabled = false;
  }

  //    } else {
  //        alert('Please Select Valid Result')
  //        document.getElementById('sbar1').value = '';
  //        document.getElementById('autocomBox').innerHTML = '';
  //
  //    }

  function divHandler(divNo) {
    let divName = 'div';
    let strDivTrack = divNo.toString();
    let divTracker = divName.concat(strDivTrack);
    divOut = divTracker;
  }

  async function set_text(msg) {
    if (
      msg.includes('Visiting Times') ||
      msg.includes('Doctor List as per you selected Dept:') ||
      msg.includes('Precaution List:') ||
      msg.includes('Department List') ||
      msg.includes('Status') ||
      msg.includes('Information for Treatment') ||
      msg.includes('Information for Surgery') ||
      msg.includes('Current Situation of Patient')
    ) {
      custom_para(msg);
    } else {
      let div = document.createElement('div');
      div.classList.add('server-message');
      div.setAttribute('style', 'background-color: #d6d6d6d6;');
      div.classList.add('temp');
      divHandler(divNo);
      div.setAttribute('id', divOut);
      if (message_count === 2) {
        div.innerHTML = time_cat + ' ' + msg;
      } else {
        div.innerHTML = msg;
      }
      document.getElementById('one').appendChild(div);
      await asyncCall(divOut);
    }
  }

  function resolveAfter2Seconds() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve('resolved');
      }, 500);
    });
  }

  async function asyncCall(data) {
    // console.log("Recieved " + data);
    document.getElementById('echo').style.display = 'block';
    divNo = divNo + 1;
    await resolveAfter2Seconds();
    document.getElementById('echo').style.display = 'none';
    document.getElementById(data).classList.remove('temp');
  }

  async function custom_para(msg) {
    let l = msg.split('|');
    let div = document.createElement('div');
    div.classList.add('temp');
    divHandler(divNo);
    div.setAttribute('id', divOut);
    div.classList.add('server-message');
    for (let i = 0; i < l.length; i++) {
      let para = document.createElement('p');
      para.innerHTML = l[i];
      div.append(para);
    }
    document.getElementById('one').appendChild(div);
    await asyncCall(divOut);
  }

  function set_header_1(header, options, count) {
    create_header_1(header, options, count);
  }

  async function create_header_1(header, options, count) {
    try {
      // console.log("Executed...............")
      document.getElementById('client').placeholder =
        'Select anyone from options.';
      let div = document.createElement('div');
      div.className = 'server-message';
      div.classList.add('temp');
      divHandler(divNo);
      div.setAttribute('id', divOut);
      let br = document.createElement('br');
      div.innerHTML = header[1];
      div.append(br);
      for (let i = 1; i <= count; i++) {
        let btn = document.createElement('button');
        btn.innerHTML = options[i];
        btn.value = options[i];
        btn.classList.add('button1-option', header[0], divOut);
        trace = header[0];
        btn.onclick = function () {
          let str = this.value;
          let res = str.toLowerCase();
          $('.' + divOut).attr('disabled', 'disabled');
          send_msg(res);
          // let elems = document.getElementsByClassName(header[0]);
          customer_msg(this.innerHTML);
        };
        div.append(btn);
        document.getElementById('one').appendChild(div);
      }
    } catch {
      // console.log('Inside second catch')
    } finally {
      asyncCall(divOut);
    }
  }

  const Home = () => {
    // console.log("home Clicked");
    document.getElementById('sbar').style.display = 'none';
    document.getElementById('two').style.display = 'inline';
    document.getElementById('four').style.display = 'inline';
    ws.send('home');
  };

  // function insertAfter(referenceNode, newNode) {
  //   referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
  // }

  // function create_header_2(header) {
  //   let d = document.createElement("div");
  //   d.innerHTML = header;
  //   d.className = "msg-box";
  //   //    d.style.width = "350px";
  //   //    d.style.height = "150px";
  //   //    d.style.background = "red";
  //   let div = document.getElementById("one");
  //   insertAfter(div, d);
  // }

  function send_msg(msg) {
    let res = msg.toLowerCase();
    ws.send(res);
  }

  function Back_button() {
    ws.send('back');
    document.getElementById('sbar').style.display = 'none';
    document.getElementById('two').style.display = 'inline';

    let elems = document.getElementsByClassName(trace);
    for (let i = 0; i < elems.length; i++) {
      elems[i].disabled = true;
    }
  }

  function customer_msg(msg) {
    let d = document.createElement('div');
    d.classList.add('client-message');
    let para = document.createElement('p');
    para.innerHTML = msg;
    para.setAttribute('style', 'text-align:right');
    d.append(para);
    document.getElementById('one').appendChild(d);
    document.getElementById('autocomBox').display = 'None';
  }

  function sendInput(input) {
    let inp = document.getElementById('client').value;
    if (inp.length < 1) {
      // console.log("Client box is empty")
      inp = document.getElementById('otherInput').value;
      if (inp.length < 1) {
        console.log('other input box is empty');
        // alert("Enter Valid data.");
      } else {
        document.getElementById('otherInput').value = '';
        let d = document.createElement('div');
        d.classList.add('client-message');
        let para = document.createElement('p');
        para.innerHTML = inp;
        para.setAttribute('style', 'text-align:right');
        d.append(para);
        document.getElementById('one').appendChild(d);
        ws.send(inp);
        // let elems = document.getElementsByClassName(trace);
        $('.' + divOut).prop('disabled', 'disabled');
        divNo = divNo + 1;
        //                for (let i = 0; i < elems.length; i++) {
        //                    elems[i].disabled = true;
        //                }
      }
    } else {
      document.getElementById('client').value = '';
      let d = document.createElement('div');
      d.classList.add('client-message');
      //    d.setAttribute("style", "background-color: #caadadd6;");
      let para = document.createElement('p');
      para.innerHTML = inp;
      para.setAttribute('style', 'text-align:right');
      d.append(para);
      document.getElementById('one').appendChild(d);
      ws.send(inp);
      // let elems = document.getElementsByClassName(trace);
      $('.' + divOut).prop('disabled', 'disabled');
      divNo = divNo + 1;

      //        for (let i = 0; i < elems.length; i++) {
      //            elems[i].disabled = true;
      //        }
    }
  }

  //Live Search
  // // getting all required elements

  // let icon = searchWrapper.querySelector(".icon");
  // let linkTag = searchWrapper.querySelector("a");

  // if user press any key and release

  const OnKeyUp = (e) => {
    let userData = e.target.value; //user enetered data
    let emptyArray = [];
    if (userData) {
      // console.log(suggestions);
      emptyArray = suggestions.filter((data) => {
        // console.log(data);
        //filtering array value and user characters to lowercase and return only those words which are start with user enetered chars
        return data.toLocaleLowerCase().includes(userData.toLocaleLowerCase());
      });
      emptyArray = emptyArray.map((data) => {
        // passing return data inside li tag
        let dataID = Object.keys(checkDict).find(
          (key) => checkDict[key] === data
        );

        return (data =
          '<li value=' +
          dataID +
          ' ' +
          'className=' +
          data +
          ' ' +
          '>' +
          data +
          '</li>');
      });
      searchWrapper.classList.add('active'); //show autocomplete box
      showSuggestions(emptyArray);
      let allList = suggBox.querySelectorAll('li');
      for (let i = 0; i < allList.length; i++) {
        //adding onclick attribute in all li tag
        allList[i].addEventListener('click', function () {
          select(this);
        });
        allList[i].addEventListener('click', function () {
          sendSearchbar(
            suggestions[this.value - 1],
            suggestions[this.value - 1]
          );
        });
      }
    } else {
      searchWrapper.classList.remove('active'); //hide autocomplete box
    }
  };

  function sendSearchbar(id, val) {
    // alert(id);
    // alert(val);
    let sbar = (document.getElementById('sbar1').value = val);
    //    let d = sbar.split(',')
    if (id === 0) {
      alert('Please Select Valid Result');
      document.getElementById('sbar1').value = '';
      document.getElementById('autocom-box').innerHTML = '';
    } else {
      let d = document.createElement('div');
      d.classList.add('client-message');
      let para = document.createElement('p');
      document.getElementById('sbar').style.display = 'none';
      para.innerHTML = sbar;
      para.setAttribute('style', 'text-align:right');
      d.append(para);
      document.getElementById('one').appendChild(d);
      ws.send(id);
      document.getElementById('two').style.display = 'inline';
      document.getElementById('four').style.display = 'inline';
    }
  }
  // function sendSearchSelect(id) {
  //   if (id === 0) {
  //     alert("Please Select Valid Result");
  //     document.getElementById("sbar1").value = "";
  //     document.getElementById("autocom-box").innerHTML = "";
  //   } else {
  //     document.getElementById("sbar1").value = "";
  //     document.getElementById("autocom-box").innerHTML = "";
  //     ws.send(id);
  //   }
  // }

  function select(element) {
    let selectData = element.textContent;
    inputBox.value = selectData;
    searchWrapper.classList.remove('active');
  }

  function showSuggestions(list) {
    let listData;
    if (!list.length) {
      listData = '<li>' + 'No Results' + '</li>';
    } else {
      listData = list.join('');
    }
    suggBox.innerHTML = listData;
  }

  function set_suggestions(options) {
    suggestions.length = 0;
    let l = Object.keys(options).length;
    for (let i = 1; i <= l; i++) {
      suggestions.push(options[i]);

      checkDict[i] = options[i];
    }
  }

  $('#client').keyup(function (event) {
    if (event.keyCode === 13) {
      $('#button1').click();
    }
  });
  $('#otherInput').keyup(function (event) {
    if (event.keyCode === 13) {
      $('#button1').click();
    }
  });

  // $(document).ready(function () {
  //   $(".demo-multiselect").select2();
  // });
  function cc(p) {
    console.log('🚀 ~ file: Chatbot.js ~ line 660 ~ cc ~ p', p);
  }

  function record() {
    alert('we are working on that');
    // document.getElementById("client").value = "";
    // document.getElementById("otherInput").value = "";
    // let english = "en-IN";
    // let bengali = "bn-IN";
    // let hindi = "hi";
    // let chatbotLang = $(".goog-te-menu-value span:first").text().toUpperCase();
    // if (chatbotLang == "HINDI") {
    //   chatbotLang = hindi;
    // } else if (chatbotLang == "BENGALI") {
    //   chatbotLang = bengali;
    // } else {
    //   chatbotLang = english;
    // }
    // let recognition = new window.webkitSpeechRecognition();
    // recognition.lang = chatbotLang;
    // recognition.onresult = function (event) {
    //   document.getElementById("client").value = event.results[0][0].transcript;
    //   document.getElementById("otherInput").value =
    //     event.results[0][0].transcript;
    // };
    // recognition.start();
  }

  return (
    <>
      <div
        className={
          Style.botButtonPosition === 'right'
            ? 'chat-box-right'
            : 'chat-box-left'
        }
      >
        {/* <audio id="myAudio">
          <source src="" type="audio/mpeg" />
        </audio> */}
        <div className="chat-header">
          <button className="back btn" onClick={Back_button} type="submit">
            <KeyboardBackspaceIcon className="icon-color" />
          </button>

          <span>
            {Style.chatHeaderTitle ? Style.chatHeaderTitle : 'Sigma-H AI Bot'}
          </span>
          <button className="Query btn" onClick={(e) => Home(e)} type="button">
            <HomeIcon className="icon-color" />
          </button>
        </div>
        <div className="wrapper-messages">
          <img
            src={
              Style.adLogo
                ? Style.adLogo
                : 'https://sigmentech.com/site/wp-content/uploads/2021/08/w.png'
            }
            alt="hi"
            className="ad-logo"
          />
          <div className="message-only">
            <div id="one">
              <input type="text" id="number" value="" hidden />
            </div>
            <div id="three"> </div>
            <div id="ub"></div>
            <div id="echo" className="message to typing">
              <div className="typing_loader"></div>
            </div>
          </div>
        </div>
        <div id="selDiv" hidden>
          <select id="selBox" className="demo-multiselect" multiple></select>
          <button id="xx" onClick={cc($(this).parent().attr('id'))}>
            CC Button
          </button>

          <button id="bot">DD Button</button>
        </div>
        <div className="custom-msg">
          <div id="sbar" className="wrapper">
            <div className="search-input">
              {/* <a href="" target="_blank" hidden></a> */}
              <div id="autocomBox" className="autocom-box floting-select"></div>
              <input
                id="sbar1"
                type="text"
                placeholder="Type to search.."
                // autocomplete="off"
                onKeyUp={OnKeyUp}
              />
              <button className="sbar-button button1" onClick={sendSearchbar}>
                <SendIcon />
              </button>
            </div>
          </div>
          <div id="two">
            <input
              type="text"
              id="client"
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
              // autofocus="autofocus"
              placeholder="Enter your message."
              className="userInputDynamic input-field"
            />
            <input
              type="text"
              id="otherInput"
              // autofocus="autofocus"
              value={otherInput}
              onChange={(e) => setOtherInput(e.target.value)}
              hidden
              placeholder="Enter your message."
              className="userInputDynamic input-field"
            />
          </div>
          <div id="four">
            <button className="left-pan button1" onClick={record}>
              <MicIcon />
            </button>

            <button id="button1" className="button1" onClick={sendInput}>
              <SendIcon />
            </button>
          </div>
        </div>
      </div>
      <div id="myModal" className="modal">
        <div className="modal-content">
          <span className="close">&times;</span>
          <h4 id="name" className="md-heading">
            A migraine can cause severe throbbing pain or a pulsing sensation,
            usually on one side of the head. It's often accompanied by nausea,
            vomiting, and extreme sensitivity to light and sound. Migraine
            attacks can last for hours to days, and the pain can be so severe
            that it interferes with your daily activities.
          </h4>
          <p id="description" className="md-description">
            Precautions for Migraine: 1. meditation, 2. reduce stress, 3. use
            poloroid glasses in sun, 4.consult doctor
          </p>
          <p id="depart" className="md-description">
            Department Belongs to: Neurologist,General Physician, Medicine
            Doctor
          </p>
          <h4 id="name2" className="md-heading md-heading-bdr">
            A migraine can cause severe throbbing pain or a pulsing sensation,
            usually on one side of the head. It's often accompanied by nausea,
            vomiting, and extreme sensitivity to light and sound. Migraine
            attacks can last for hours to days, and the pain can be so severe
            that it interferes with your daily activities.
          </h4>
          <p id="description2" className="md-description">
            Precautions for Migraine: 1. meditation, 2. reduce stress, 3. use
            poloroid glasses in sun, 4.consult doctor
          </p>
          <p id="depart2" className="md-description">
            Department Belongs to: Neurologist,General Physician, Medicine
            Doctor
          </p>
          <div className="mdl-text-right">
            <button
              id="modalBooking"
              onClick={modalBookingButton}
              value="booking"
              className="mdl-btn"
            >
              Book Now
            </button>
          </div>
        </div>
      </div>
    </>
  );
};

export default ChatBotUI;