/* eslint-disable react-hooks/exhaustive-deps */
import { useContext, useEffect, useState } from "react";

import Head from "next/head";
import dynamic from "next/dynamic";

import Tooltips from "./components/Tooltip";

const Button = dynamic(() => import("./components/Button"));
const PopOver = dynamic(() => import("./components/PopOver"));

import styles from "./styles/Chatbot.module.scss";

import { ChatbotProps, Context } from "./contexts/Context";

export default function Chatbot({
  color,
  base_url,
  wallpaper,
  owner_name,
  whatsapp_number,
  initial_message,
  background_color,
}: ChatbotProps) {
  const { chatState, userName, handleSetChatState } = useContext(Context);

  const [openChat, setOpenChat] = useState(false);
  const [openPopOver, setOpenPopOver] = useState(false);

  function handleOpenChat() {
    setOpenPopOver(false);

    if (openChat) {
      setOpenChat(false);
      handleSetChatState(false);
    } else {
      setOpenChat(true);
      handleSetChatState(true);
    }
  }

  function handleOpenPopOver() {
    setOpenPopOver(true);
  }

  useEffect(() => {
    if (userName === "") {
      setTimeout(() => {
        handleOpenPopOver();
      }, 5000);
    }
  }, [chatState]);

  return (
    <>
      <Head>
        <title>Owlchat</title>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
        />
      </Head>
      {!openChat ? (
        <>
          <Tooltips title="Abrir Chatbot" placement="top">
            <div className={styles.desktop}>
              <Button
                name="chat-desktop"
                type="button"
                onClick={handleOpenChat}
                style={{
                  color: color || "#fff",
                  backgroundColor: background_color || "#bf0436",
                }}
              >
                <div className={styles.messageBox}>
                  {openPopOver && (
                    <div className={styles.notification}>
                      <span>1</span>
                    </div>
                  )}

                  <div className={styles.span}>
                    <span>Chatbot</span>
                  </div>
                  <p>{initial_message || "Entrar em contato"}</p>
                </div>

                <svg
                  width="50"
                  height="26"
                  viewBox="0 0 50 26"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M17.8645 8.29979C17.8645 9.15601 17.1671 9.8541 16.3121 9.8541C15.4566 9.8541 14.7598 9.15601 14.7598 8.29979C14.7598 7.44291 15.4566 6.74481 16.3121 6.74481C17.1671 6.74481 17.8645 7.44291 17.8645 8.29979ZM15.6698 8.29979C15.6698 8.65343 15.9585 8.94277 16.3121 8.94277C16.6658 8.94277 16.9545 8.65343 16.9545 8.29979C16.9545 7.94549 16.6658 7.65615 16.3121 7.65615C15.9585 7.65615 15.6698 7.94549 15.6698 8.29979Z"
                    fill="white"
                  />
                  <path
                    d="M7.09121 9.8541C6.23631 9.8541 5.53886 9.15601 5.53886 8.29979C5.53886 7.44291 6.23631 6.74481 7.09121 6.74481C7.94678 6.74481 8.64356 7.44291 8.64356 8.29979C8.64356 9.15601 7.94678 9.8541 7.09121 9.8541ZM7.09121 7.65615C6.73757 7.65615 6.44889 7.94549 6.44889 8.29979C6.44889 8.65343 6.73757 8.94277 7.09121 8.94277C7.44486 8.94277 7.73354 8.65343 7.73354 8.29979C7.73354 7.94549 7.44486 7.65615 7.09121 7.65615Z"
                    fill="white"
                  />
                  <path
                    d="M18.7778 2.23536C20.9994 4.05474 22.4212 6.82417 22.4212 9.91575V12.5953C22.4212 19.8906 16.4972 25.8244 9.21372 25.8244H0.982193V9.91575C0.982193 6.82417 2.40398 4.05868 4.62556 2.23864C3.91499 1.90534 3.15916 1.64749 2.3692 1.47165C1.60353 1.29975 0.807012 1.2138 0 1.2138V0C0.896243 0 1.78199 0.0957918 2.63033 0.288687C3.73259 0.532759 4.77646 0.928392 5.7416 1.44409C7.24277 0.529479 9.00048 0 10.8829 0H12.5205C14.4029 0 16.1606 0.529479 17.6618 1.44409C18.623 0.925112 19.6668 0.529479 20.7697 0.288687C21.6214 0.0957918 22.5071 0 23.4034 0V1.2138C22.5963 1.2138 21.7998 1.29975 21.0302 1.47165C20.2442 1.64355 19.4884 1.90534 18.7778 2.23536ZM2.19402 23.9669C2.61 23.9013 3.00825 23.7911 3.38617 23.6435V12.6537C3.31006 12.6504 3.23855 12.6438 3.15916 12.6438C2.93936 12.6438 2.49977 12.6576 2.19074 12.6747V23.9669H2.19402ZM12.5205 1.2138H10.8829C9.45779 1.2138 8.11474 1.56154 6.92653 2.17368C9.20322 3.7595 10.9032 6.09786 11.6997 8.78069C12.4969 6.09786 14.2001 3.7595 16.4768 2.17368C15.2886 1.56154 13.9456 1.2138 12.5205 1.2138ZM7.09121 5.613C5.61103 5.613 4.40576 6.82024 4.40576 8.30304C4.40576 9.78519 5.61103 10.9924 7.09121 10.9924C8.57139 10.9924 9.77666 9.78519 9.77666 8.30304C9.77666 6.82024 8.57139 5.613 7.09121 5.613ZM13.63 8.29976C13.63 9.7819 14.8352 10.9891 16.3154 10.9891C17.7956 10.9891 19.0009 9.7819 19.0009 8.29976C19.0009 6.81696 17.7956 5.60972 16.3154 5.60972C14.8352 5.60972 13.63 6.81696 13.63 8.29976ZM17.6132 2.87178C16.8889 3.32581 16.2229 3.8625 15.6252 4.46415C15.8483 4.42282 16.0786 4.3992 16.3121 4.3992C18.4615 4.3992 20.2094 6.14969 20.2094 8.29976C20.2094 10.4492 18.4615 12.1997 16.3154 12.1997C14.6738 12.1997 13.2691 11.1781 12.6996 9.73729C12.5107 10.5423 12.4076 11.3743 12.4076 12.2272H10.9957C10.9957 11.3776 10.8966 10.5456 10.7077 9.74385C10.1342 11.182 8.72951 12.1997 7.09121 12.1997C4.94508 12.1997 3.19721 10.4492 3.19721 8.29976C3.19721 6.14969 4.94508 4.3992 7.09121 4.3992C7.32478 4.3992 7.55508 4.42282 7.77487 4.46415C7.17716 3.8625 6.51449 3.32581 5.79015 2.87178C3.61253 4.45366 2.19402 7.02363 2.19402 9.91575V11.7633C2.57916 11.7424 3.04237 11.7319 3.16244 11.7319C5.76915 11.7319 7.88838 13.8544 7.88838 16.465V18.6971C7.88838 21.1358 6.27764 23.3646 3.99373 24.3764L3.84282 24.4413C3.6952 24.503 3.54036 24.5581 3.38617 24.6099H9.21372C15.8279 24.6099 21.2126 19.22 21.2126 12.592V9.91247C21.2093 7.01969 19.7908 4.45366 17.6132 2.87178ZM3.99045 12.7364V23.3719C4.45366 23.1278 4.87619 22.8247 5.25083 22.4776V13.2698C4.87291 13.0185 4.4471 12.8361 3.99045 12.7364ZM5.85838 13.7612V21.8241C6.56239 20.9298 6.98164 19.8394 6.98164 18.6971V16.465C6.97836 15.4093 6.54861 14.4527 5.85838 13.7612Z"
                    fill="white"
                  />
                  <path
                    d="M29.2824 0.570186C29.0167 0.470457 28.7182 0.420593 28.4032 0.420593C28.0877 0.420593 27.8055 0.470457 27.5241 0.570186C27.1422 0.70272 26.8102 0.918579 26.5451 1.2007C26.0308 1.71444 25.765 2.32855 25.765 3.05814V9.39549C25.765 9.95974 25.931 10.4735 26.263 10.9216C26.5779 11.3697 27.0097 11.6846 27.5241 11.8834C27.8055 11.9832 28.0877 12.033 28.4032 12.033C28.7182 12.033 29.0167 11.9832 29.2824 11.8834C29.6636 11.7345 29.9956 11.5351 30.2777 11.27C30.7915 10.7556 31.0572 10.1251 31.0572 9.39549V3.05814C31.0572 2.49455 30.8912 1.98016 30.5599 1.51564C30.2443 1.08457 29.8132 0.768986 29.2824 0.570186ZM29.2824 9.39549C29.2824 9.62775 29.1991 9.84361 29.0331 10.0089C28.8507 10.1749 28.6519 10.2747 28.4032 10.2747C28.171 10.2747 27.9551 10.1913 27.7891 10.0089C27.6231 9.84361 27.5241 9.64415 27.5241 9.39549V3.05814C27.5241 2.82588 27.6231 2.61068 27.7891 2.44468C27.9551 2.27869 28.171 2.17896 28.4032 2.17896C28.6519 2.17896 28.8507 2.26229 29.0331 2.44468C29.1991 2.61068 29.2824 2.80948 29.2824 3.05814V9.39549Z"
                    fill="white"
                  />
                  <path
                    d="M39.1356 0.420593V9.39549C39.1356 9.64415 39.0523 9.84361 38.8869 10.0089C38.7039 10.1913 38.5051 10.2747 38.2564 10.2747C38.0241 10.2583 37.8083 10.1913 37.6423 10.0089C37.4763 9.84361 37.3772 9.62775 37.3772 9.39549V0.420593H35.6188V9.39549C35.6188 9.64415 35.5355 9.84361 35.3695 10.0089C35.1871 10.1913 34.9883 10.2747 34.7397 10.2747C34.5074 10.2583 34.2915 10.1913 34.1255 10.0089C33.9431 9.84361 33.8605 9.62775 33.8605 9.39549V0.420593H32.1015V9.39549C32.1015 10.1251 32.3672 10.7392 32.8816 11.2536C33.1466 11.5351 33.4786 11.7509 33.8605 11.8834C34.1419 11.9832 34.4241 12.033 34.7397 12.033C35.0546 12.033 35.3367 11.9832 35.6188 11.8834C35.9502 11.7509 36.2487 11.5849 36.498 11.3527C36.7631 11.5849 37.0452 11.7509 37.3772 11.8834C37.6593 11.9832 37.9408 12.033 38.2564 12.033C38.5713 12.033 38.8535 11.9832 39.1356 11.8834C39.6664 11.6846 40.081 11.3697 40.413 10.938C40.7444 10.4735 40.894 9.95974 40.894 9.39549V0.420593H39.1356Z"
                    fill="white"
                  />
                  <path
                    d="M43.6968 10.2747V0.420593H41.9377V12.033H47.2135V10.2747H43.6968Z"
                    fill="white"
                  />
                  <path
                    d="M31.0408 17.7385V16.1954C31.0408 15.4658 30.7915 14.8516 30.2777 14.3379C29.9956 14.0558 29.6636 13.8399 29.2824 13.7074C29.0003 13.6077 28.7182 13.5578 28.4032 13.5578C28.0876 13.5578 27.8055 13.6077 27.5241 13.7074C27.0097 13.9062 26.5779 14.2218 26.2466 14.6528C25.931 15.1174 25.765 15.6318 25.765 16.1954V22.5327C25.765 23.0969 25.931 23.6107 26.2466 24.0752C26.5779 24.5069 27.0097 24.8219 27.5241 25.0207C27.8055 25.1204 28.0876 25.1702 28.4032 25.1702C28.7182 25.1702 29.0003 25.1204 29.2824 25.0207C29.6636 24.8881 29.9956 24.6723 30.2777 24.3908C30.7915 23.8764 31.0408 23.2623 31.0408 22.5327V20.9895H29.2824V22.5327C29.2824 22.765 29.1991 22.9808 29.0167 23.1462C28.8507 23.3286 28.6519 23.4119 28.4032 23.4119C28.171 23.4119 27.9551 23.3286 27.7891 23.1462C27.6067 22.9808 27.5241 22.7814 27.5241 22.5327V16.1954C27.5241 15.9467 27.6067 15.7479 27.7891 15.5819C27.9551 15.3995 28.171 15.3162 28.4032 15.3162C28.6519 15.3332 28.8507 15.3995 29.0167 15.5819C29.1991 15.7479 29.2824 15.9631 29.2824 16.1954V17.7385H31.0408Z"
                    fill="white"
                  />
                  <path
                    d="M35.6024 13.5578V19.2312H33.844V13.5578H32.085V25.1702H33.844V20.9895H35.6024V25.1702H37.3607V13.5578H35.6024Z"
                    fill="white"
                  />
                  <path
                    d="M43.1994 14.6528C42.8675 14.2218 42.4528 13.8898 41.922 13.7074C41.6563 13.6077 41.3414 13.5578 41.0428 13.5578C40.7443 13.5578 40.4287 13.6077 40.1636 13.7074C39.7818 13.8399 39.4498 14.0722 39.1847 14.3379C38.6703 14.8516 38.4046 15.4658 38.4046 16.1954V25.1702H40.1636V20.4587H41.922V25.1702H43.6804V16.1954C43.6804 15.6318 43.5144 15.1174 43.1994 14.6528ZM40.1636 18.7004V16.1954C40.1636 15.9631 40.2463 15.7479 40.4287 15.5819C40.5783 15.3995 40.8106 15.3162 41.0428 15.3162C41.2751 15.3162 41.5073 15.3995 41.6727 15.5819C41.8387 15.7479 41.922 15.9467 41.922 16.1954V18.7004H40.1636Z"
                    fill="white"
                  />
                  <path
                    d="M50 13.5578H44.7242V15.3162H46.4833V25.1702H48.2416V15.3162H50V13.5578Z"
                    fill="white"
                  />
                </svg>
              </Button>
            </div>
          </Tooltips>
          <Tooltips title="Abrir Chatbot" placement="left">
            <div className={styles.mobile}>
              <Button
                name="chat-mobile"
                type="button"
                onClick={handleOpenChat}
                style={{
                  color: color || "#fff",
                  backgroundColor: background_color || "#bf0436",
                }}
              >
                {openPopOver && (
                  <div className={styles.notification}>
                    <span>1</span>
                  </div>
                )}
                <svg
                  width="35"
                  height="39"
                  viewBox="0 0 35 39"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M26.7165 12.4125C26.7165 13.6929 25.6735 14.737 24.395 14.737C23.1155 14.737 22.0734 13.6929 22.0734 12.4125C22.0734 11.131 23.1155 10.087 24.395 10.087C25.6735 10.087 26.7165 11.131 26.7165 12.4125ZM23.4344 12.4125C23.4344 12.9413 23.8661 13.3741 24.395 13.3741C24.9239 13.3741 25.3556 12.9413 25.3556 12.4125C25.3556 11.8826 24.9239 11.4499 24.395 11.4499C23.8661 11.4499 23.4344 11.8826 23.4344 12.4125Z"
                    fill="white"
                  />
                  <path
                    d="M10.605 14.737C9.32645 14.737 8.28342 13.6929 8.28342 12.4125C8.28342 11.131 9.32645 10.087 10.605 10.087C11.8845 10.087 12.9265 11.131 12.9265 12.4125C12.9265 13.6929 11.8845 14.737 10.605 14.737ZM10.605 11.4499C10.0761 11.4499 9.64436 11.8826 9.64436 12.4125C9.64436 12.9413 10.0761 13.3741 10.605 13.3741C11.1339 13.3741 11.5656 12.9413 11.5656 12.4125C11.5656 11.8826 11.1339 11.4499 10.605 11.4499Z"
                    fill="white"
                  />
                  <path
                    d="M28.0824 3.34301C31.4048 6.06392 33.5311 10.2056 33.5311 14.8291V18.8364C33.5311 29.7466 24.6717 38.6207 13.7792 38.6207H1.46888V14.8291C1.46888 10.2056 3.59518 6.06981 6.91758 3.34791C5.85492 2.84945 4.72456 2.46384 3.54317 2.20087C2.39809 1.94379 1.2069 1.81525 0 1.81525V0C1.34034 0 2.66498 0.143258 3.9337 0.431735C5.58214 0.796748 7.14326 1.38842 8.58663 2.15966C10.8317 0.791842 13.4603 0 16.2754 0H18.7246C21.5397 0 24.1683 0.791842 26.4134 2.15966C27.8509 1.38352 29.412 0.791842 31.0614 0.431735C32.335 0.143258 33.6597 0 35 0V1.81525C33.7931 1.81525 32.6019 1.94379 31.4509 2.20087C30.2754 2.45795 29.1451 2.84945 28.0824 3.34301ZM3.28119 35.8429C3.90328 35.7447 4.49888 35.5799 5.06406 35.3591V18.9237C4.95024 18.9188 4.84329 18.909 4.72456 18.909C4.39585 18.909 3.73844 18.9296 3.27628 18.9551V35.8429H3.28119ZM18.7246 1.81525H16.2754C14.1442 1.81525 12.1357 2.3353 10.3587 3.25077C13.7635 5.62237 16.3059 9.11943 17.4971 13.1316C18.6892 9.11943 21.2365 5.62237 24.6413 3.25077C22.8643 2.3353 20.8558 1.81525 18.7246 1.81525ZM10.605 8.39431C8.39136 8.39431 6.58887 10.1997 6.58887 12.4173C6.58887 14.6339 8.39136 16.4393 10.605 16.4393C12.8186 16.4393 14.6211 14.6339 14.6211 12.4173C14.6211 10.1997 12.8186 8.39431 10.605 8.39431ZM20.3838 12.4124C20.3838 14.629 22.1863 16.4344 24.3999 16.4344C26.6135 16.4344 28.416 14.629 28.416 12.4124C28.416 10.1948 26.6135 8.3894 24.3999 8.3894C22.1863 8.3894 20.3838 10.1948 20.3838 12.4124ZM26.3408 4.29479C25.2575 4.97379 24.2616 5.77642 23.3677 6.6762C23.7013 6.61438 24.0457 6.57906 24.395 6.57906C27.6095 6.57906 30.2234 9.19694 30.2234 12.4124C30.2234 15.6269 27.6095 18.2447 24.3999 18.2447C21.9449 18.2447 19.8441 16.717 18.9924 14.5622C18.7098 15.7662 18.5558 17.0104 18.5558 18.286H16.4442C16.4442 17.0153 16.296 15.7711 16.0135 14.572C15.1559 16.7229 13.0551 18.2447 10.605 18.2447C7.39543 18.2447 4.78147 15.6269 4.78147 12.4124C4.78147 9.19694 7.39543 6.57906 10.605 6.57906C10.9543 6.57906 11.2987 6.61438 11.6274 6.6762C10.7335 5.77642 9.7425 4.97379 8.65924 4.29479C5.40258 6.6605 3.28119 10.5039 3.28119 14.8291V17.5922C3.85716 17.5608 4.5499 17.5451 4.72946 17.5451C8.62784 17.5451 11.7972 20.7194 11.7972 24.6236V27.9617C11.7972 31.6089 9.38828 34.9421 5.97267 36.4551L5.74699 36.5523C5.52621 36.6445 5.29465 36.7269 5.06406 36.8045H13.7792C23.6709 36.8045 31.7237 28.7438 31.7237 18.8315V14.8242C31.7188 10.498 29.5974 6.6605 26.3408 4.29479ZM5.96776 19.0474V34.9529C6.6605 34.5879 7.2924 34.1346 7.85268 33.6155V19.8451C7.2875 19.4693 6.65069 19.1965 5.96776 19.0474ZM8.76128 20.58V32.6382C9.81413 31.3008 10.4411 29.67 10.4411 27.9617V24.6236C10.4362 23.0449 9.79352 21.6142 8.76128 20.58Z"
                    fill="white"
                  />
                </svg>
              </Button>
            </div>
          </Tooltips>
        </>
      ) : (
        <PopOver
          baseUrl={base_url}
          wallpaper={wallpaper}
          color={color || "#fff"}
          ownerName={owner_name || "Bot"}
          whatsappNumber={whatsapp_number}
          onClose={() => handleOpenChat()}
          backgroundColor={background_color || "#bf0436"}
        />
      )}
    </>
  );
}
