import { useContext } from "react";

import dynamic from "next/dynamic";

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

import { CgClose } from "react-icons/cg";
import { BsArrow90DegLeft } from "react-icons/bs";

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

import Tooltips from "../Tooltip";

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

export default function Header({
  color,
  onClose,
  backgroundColor,
}: HeaderProps) {
  const { step, handleBackStep } = useContext(Context);

  return (
    <header
      className={styles.header}
      style={{
        color: color,
        backgroundColor: backgroundColor,
      }}
    >
      <div className={styles.logo}>
        <svg
          width="75"
          height="39"
          viewBox="0 0 75 39"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M26.7967 12.4496C26.7967 13.734 25.7506 14.7811 24.4682 14.7811C23.1849 14.7811 22.1397 13.734 22.1397 12.4496C22.1397 11.1643 23.1849 10.1172 24.4682 10.1172C25.7506 10.1172 26.7967 11.1643 26.7967 12.4496ZM23.5047 12.4496C23.5047 12.9801 23.9378 13.4141 24.4682 13.4141C24.9987 13.4141 25.4317 12.9801 25.4317 12.4496C25.4317 11.9182 24.9987 11.4842 24.4682 11.4842C23.9378 11.4842 23.5047 11.9182 23.5047 12.4496Z"
            fill="white"
          />
          <path
            d="M10.6368 14.7811C9.35445 14.7811 8.30829 13.734 8.30829 12.4496C8.30829 11.1643 9.35445 10.1172 10.6368 10.1172C11.9202 10.1172 12.9653 11.1643 12.9653 12.4496C12.9653 13.734 11.9202 14.7811 10.6368 14.7811ZM10.6368 11.4842C10.1064 11.4842 9.67332 11.9182 9.67332 12.4496C9.67332 12.9801 10.1064 13.4141 10.6368 13.4141C11.1673 13.4141 11.6003 12.9801 11.6003 12.4496C11.6003 11.9182 11.1673 11.4842 10.6368 11.4842Z"
            fill="white"
          />
          <path
            d="M28.1667 3.35304C31.4991 6.08212 33.6317 10.2363 33.6317 14.8736V18.8929C33.6317 29.8358 24.7457 38.7366 13.8206 38.7366H1.47329V14.8736C1.47329 10.2363 3.60597 6.08802 6.93834 3.35796C5.87249 2.858 4.73874 2.47123 3.55381 2.20747C2.40529 1.94962 1.21052 1.8207 0 1.8207V0C1.34436 0 2.67298 0.143688 3.9455 0.433031C5.59889 0.799139 7.16469 1.39259 8.61239 2.16614C10.8642 0.794218 13.5007 0 16.3243 0H18.7807C21.6043 0 24.2409 0.794218 26.4926 2.16614C27.9344 1.38767 29.5002 0.794218 31.1546 0.433031C32.432 0.143688 33.7607 0 35.105 0V1.8207C33.8945 1.8207 32.6997 1.94962 31.5453 2.20747C30.3663 2.46532 29.2325 2.858 28.1667 3.35304ZM3.29103 35.9504C3.91499 35.852 4.51238 35.6867 5.07926 35.4652V18.9805C4.96509 18.9756 4.85782 18.9658 4.73874 18.9658C4.40904 18.9658 3.74965 18.9864 3.28611 19.012V35.9504H3.29103ZM18.7807 1.8207H16.3243C14.1867 1.8207 12.1721 2.3423 10.3898 3.26053C13.8048 5.63924 16.3548 9.14679 17.5496 13.171C18.7453 9.14679 21.3002 5.63924 24.7152 3.26053C22.9329 2.3423 20.9183 1.8207 18.7807 1.8207ZM10.6368 8.4195C8.41655 8.4195 6.60864 10.2304 6.60864 12.4546C6.60864 14.6778 8.41655 16.4886 10.6368 16.4886C12.8571 16.4886 14.665 14.6778 14.665 12.4546C14.665 10.2304 12.8571 8.4195 10.6368 8.4195ZM20.445 12.4496C20.445 14.6729 22.2529 16.4837 24.4731 16.4837C26.6934 16.4837 28.5013 14.6729 28.5013 12.4496C28.5013 10.2254 26.6934 8.41458 24.4731 8.41458C22.2529 8.41458 20.445 10.2254 20.445 12.4496ZM26.4198 4.30767C25.3333 4.98871 24.3344 5.79376 23.4378 6.69623C23.7724 6.63423 24.1179 6.5988 24.4682 6.5988C27.6923 6.5988 30.3141 9.22454 30.3141 12.4496C30.3141 15.6737 27.6923 18.2995 24.4731 18.2995C22.0108 18.2995 19.9037 16.7672 19.0494 14.6059C18.766 15.8135 18.6115 17.0614 18.6115 18.3408H16.4936C16.4936 17.0663 16.3449 15.8184 16.0615 14.6158C15.2014 16.7731 13.0943 18.2995 10.6368 18.2995C7.41762 18.2995 4.79582 15.6737 4.79582 12.4496C4.79582 9.22454 7.41762 6.5988 10.6368 6.5988C10.9872 6.5988 11.3326 6.63423 11.6623 6.69623C10.7657 5.79376 9.77174 4.98871 8.68522 4.30767C5.41879 6.68049 3.29103 10.5354 3.29103 14.8736V17.645C3.86874 17.6135 4.56355 17.5978 4.74366 17.5978C8.65373 17.5978 11.8326 20.7815 11.8326 24.6975V28.0456C11.8326 31.7038 9.41645 35.047 5.99059 36.5645L5.76423 36.662C5.5428 36.7545 5.31053 36.8371 5.07926 36.9149H13.8206C23.7419 36.9149 31.8189 28.83 31.8189 18.888V14.8687C31.814 10.5295 29.6862 6.68049 26.4198 4.30767ZM5.98567 19.1045V35.0578C6.68049 34.6917 7.31428 34.237 7.87624 33.7164V19.9047C7.30936 19.5277 6.67064 19.2541 5.98567 19.1045ZM8.78757 20.6418V32.7361C9.84358 31.3947 10.4725 29.7591 10.4725 28.0456V24.6975C10.4675 23.114 9.82291 21.6791 8.78757 20.6418Z"
            fill="white"
          />
          <path
            d="M43.9236 0.855248C43.5251 0.705656 43.0773 0.630859 42.6049 0.630859C42.1315 0.630859 41.7083 0.705656 41.2861 0.855248C40.7133 1.05405 40.2153 1.37784 39.8177 1.80103C39.0461 2.57163 38.6476 3.4928 38.6476 4.58719V14.0932C38.6476 14.9396 38.8965 15.7102 39.3945 16.3824C39.8669 17.0545 40.5145 17.5269 41.2861 17.8251C41.7083 17.9747 42.1315 18.0495 42.6049 18.0495C43.0773 18.0495 43.5251 17.9747 43.9236 17.8251C44.4954 17.6017 44.9934 17.3025 45.4166 16.9049C46.1872 16.1334 46.5858 15.1876 46.5858 14.0932V4.58719C46.5858 3.74179 46.3368 2.97021 45.8398 2.27342C45.3664 1.62683 44.7198 1.15345 43.9236 0.855248ZM43.9236 14.0932C43.9236 14.4416 43.7987 14.7654 43.5497 15.0134C43.2761 15.2624 42.9779 15.412 42.6049 15.412C42.2565 15.412 41.9327 15.287 41.6837 15.0134C41.4347 14.7654 41.2861 14.4662 41.2861 14.0932V4.58719C41.2861 4.23879 41.4347 3.91599 41.6837 3.667C41.9327 3.418 42.2565 3.26841 42.6049 3.26841C42.9779 3.26841 43.2761 3.3934 43.5497 3.667C43.7987 3.91599 43.9236 4.21419 43.9236 4.58719V14.0932Z"
            fill="white"
          />
          <path
            d="M58.7034 0.630859V14.0932C58.7034 14.4662 58.5784 14.7654 58.3304 15.0134C58.0558 15.287 57.7576 15.412 57.3846 15.412C57.0362 15.3874 56.7124 15.287 56.4634 15.0134C56.2144 14.7654 56.0658 14.4416 56.0658 14.0932V0.630859H53.4283V14.0932C53.4283 14.4662 53.3033 14.7654 53.0543 15.0134C52.7807 15.287 52.4825 15.412 52.1095 15.412C51.7611 15.3874 51.4373 15.287 51.1883 15.0134C50.9147 14.7654 50.7907 14.4416 50.7907 14.0932V0.630859H48.1522V14.0932C48.1522 15.1876 48.5508 16.1088 49.3224 16.8803C49.72 17.3025 50.2179 17.6263 50.7907 17.8251C51.2129 17.9747 51.6361 18.0495 52.1095 18.0495C52.5819 18.0495 53.0051 17.9747 53.4283 17.8251C53.9253 17.6263 54.3731 17.3773 54.7471 17.029C55.1447 17.3773 55.5678 17.6263 56.0658 17.8251C56.489 17.9747 56.9112 18.0495 57.3846 18.0495C57.857 18.0495 58.2802 17.9747 58.7034 17.8251C59.4996 17.5269 60.1216 17.0545 60.6195 16.407C61.1165 15.7102 61.3409 14.9396 61.3409 14.0932V0.630859H58.7034Z"
            fill="white"
          />
          <path
            d="M65.5451 15.412V0.630859H62.9066V18.0495H70.8202V15.412H65.5451Z"
            fill="white"
          />
          <path
            d="M46.5612 26.6077V24.293C46.5612 23.1986 46.1872 22.2774 45.4166 21.5068C44.9934 21.0836 44.4954 20.7599 43.9236 20.5611C43.5005 20.4115 43.0773 20.3367 42.6049 20.3367C42.1315 20.3367 41.7083 20.4115 41.2861 20.5611C40.5145 20.8593 39.8669 21.3326 39.3699 21.9792C38.8965 22.676 38.6476 23.4476 38.6476 24.293V33.799C38.6476 34.6454 38.8965 35.416 39.3699 36.1128C39.8669 36.7603 40.5145 37.2327 41.2861 37.5309C41.7083 37.6805 42.1315 37.7553 42.6049 37.7553C43.0773 37.7553 43.5005 37.6805 43.9236 37.5309C44.4954 37.3321 44.9934 37.0084 45.4166 36.5862C46.1872 35.8146 46.5612 34.8934 46.5612 33.799V31.4843H43.9236V33.799C43.9236 34.1474 43.7987 34.4712 43.5251 34.7192C43.2761 34.9928 42.9779 35.1178 42.6049 35.1178C42.2565 35.1178 41.9327 34.9928 41.6837 34.7192C41.4101 34.4712 41.2861 34.172 41.2861 33.799V24.293C41.2861 23.92 41.4101 23.6218 41.6837 23.3728C41.9327 23.0992 42.2565 22.9742 42.6049 22.9742C42.9779 22.9998 43.2761 23.0992 43.5251 23.3728C43.7987 23.6218 43.9236 23.9446 43.9236 24.293V26.6077H46.5612Z"
            fill="white"
          />
          <path
            d="M53.4036 20.3367V28.8467H50.766V20.3367H48.1275V37.7553H50.766V31.4843H53.4036V37.7553H56.0411V20.3367H53.4036Z"
            fill="white"
          />
          <path
            d="M64.7992 21.9792C64.3012 21.3326 63.6792 20.8347 62.883 20.5611C62.4844 20.4115 62.012 20.3367 61.5642 20.3367C61.1164 20.3367 60.6431 20.4115 60.2455 20.5611C59.6727 20.7599 59.1747 21.1083 58.7771 21.5068C58.0055 22.2774 57.6069 23.1986 57.6069 24.293V37.7553H60.2455V30.6881H62.883V37.7553H65.5206V24.293C65.5206 23.4476 65.2716 22.676 64.7992 21.9792ZM60.2455 28.0505V24.293C60.2455 23.9446 60.3695 23.6218 60.6431 23.3728C60.8675 23.0992 61.2158 22.9742 61.5642 22.9742C61.9126 22.9742 62.261 23.0992 62.509 23.3728C62.758 23.6218 62.883 23.92 62.883 24.293V28.0505H60.2455Z"
            fill="white"
          />
          <path
            d="M75 20.3367H67.0863V22.9742H69.7249V37.7553H72.3624V22.9742H75V20.3367Z"
            fill="white"
          />
        </svg>
      </div>
      <div className={styles.leftButton}>
        <Tooltips
          placement="top"
          title="Voltar Etapa"
          style={{
            visibility: step !== 1 ? "visible" : "hidden",
            opacity: step !== 1 ? 1 : 0,
            transition: "all 0.5s ease-in-out",
          }}
        >
          <div>
            <Button
              style={{
                background: "transparent",
                boxShadow: "none",
                padding: ".35rem",
                visibility: step !== 1 ? "visible" : "hidden",
                opacity: step !== 1 ? 1 : 0,
                transition: "all 0.5s ease-in-out",
                fontSize: ".9rem",
                fontWeight: "400",
                gap: "0.75rem",
              }}
              onClick={handleBackStep}
              disabled={step === 1}
            >
              <BsArrow90DegLeft size={15} />
              Voltar
            </Button>
          </div>
        </Tooltips>

        <Tooltips placement="top" title="Fechar">
          <div>
            <Button
              style={{
                boxShadow: "none",
                top: "-.25rem",
                right: "-.25rem",
                borderRadius: "50%",
                padding: ".4rem",
                background: backgroundColor,
                border: "1px solid var(--white-solid)",
                transition: "all 0.5s ease-in-out",
                filter: "grayscale(0.4)",
              }}
              onClick={onClose}
            >
              <CgClose size={15} />
            </Button>
          </div>
        </Tooltips>
      </div>
    </header>
  );
}
