<script setup lang="ts">
import { setTheme } from "@/utils";
import { ref, computed, watch } from "vue";
import { useRoute } from "vue-router";
const header = ref<HTMLElement | null>(null);

const router = useRoute();
const selectedTheme = ref<string>(localStorage.getItem("theme") || "system");

function convertToHex(color: string) {
  if (color.startsWith("var(--")) {
    const root = document.documentElement;
    const computedStyle = getComputedStyle(root);
    const variableName = color.slice(4, -1);
    const hexValue = computedStyle.getPropertyValue(variableName).trim();

    const hexOnly = hexValue.replace(/[^0-9a-fA-F]/g, "");

    return hexOnly.toUpperCase();
  } else {
    return color;
  }
}

function hexToRGBA(hex: string, opacity: number) {
  hex = hex.replace("#", "");
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);
  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
}

const dynamicStyleHeader = computed<string>(() => {
  let color = "";
  if (router.name === "buttons") {
    color = "var(--secondary-500)";
  } else if (router.name === "modal") {
    color = "var(--red-500)";
  } else if (router.name === "spinner") {
    color = "var(--green-dark-500)";
  } else if (router.name === "avatar") {
    color = "var(--green-dark-500)";
  } else if (router.name === "card") {
    color = "var(--orange-500)";
  } else if (router.name === "dropdown") {
    color = "var(--orange-500)";
  } else if (["tag", "breadcrumb"].includes(router.name as string)) {
    color = "var(--secondary-500)";
  }

  const hexToRGB = convertToHex(color);
  const rgbaColor = hexToRGBA(hexToRGB, 0.15);

  return `background: ${rgbaColor};`;
});

const dynamicColorText = computed<boolean>(() => {
  return router.path.includes("components");
});

const dynamicText = computed<string>(() => {
  const routeName: string = router.name as string;

  if (routeName) {
    return routeName.charAt(0).toUpperCase() + routeName.slice(1);
  }
  return "";
});

watch(selectedTheme, (newValue) => {
  if (newValue) {
    setTheme(newValue);
  }
});

defineExpose({ header });
</script>

<template>
  <header ref="header" :style="dynamicStyleHeader">
    <nav>
      <div id="open-side-on-focus" tabindex="-1">
        <router-link :class="{ component: dynamicColorText }" :to="{ name: 'Home' }">
          <transition name="fade">
            <img v-if="!dynamicColorText" src="@/assets/icons/greenn-white.svg" alt="greenn-icon" />
            <img v-else src="@/assets/icons/greenn-black.svg" alt="greenn-icon" />
          </transition>
        </router-link>
        <h1 v-if="router.name === 'Home'">Verdee <br />Design System</h1>
        <h1 v-else :class="{ component: dynamicColorText }">{{ dynamicText }}</h1>
      </div>

      <section>
        <a :class="{ component: dynamicColorText }" href="https://greenn.com.br/" target="_blank">greenn.com.br</a>

        <select v-model="selectedTheme">
          <option value="dark">Dark</option>
          <option value="light">Light</option>
          <option value="system">System</option>
        </select>
      </section>
    </nav>
    <h1 v-if="router.name === 'Home'">Verdee <br />Design System</h1>
    <h1 v-else :class="{ component: dynamicColorText }">{{ dynamicText }}</h1>
  </header>
</template>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  opacity: 1;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
header {
  background: var(--gray-500);
  width: var(--w-vw);
  padding: var(--spacing-7) var(--spacing-20);
  display: grid;
  transition: var(--transition);

  @media (max-width: 768px) {
    padding: var(--spacing-5) var(--spacing-5);
    > h1 {
      display: none;
    }
    nav h1 {
      display: inline-block !important;
      font-size: 16px;
      line-height: 1.3;
      font-weight: 500;
    }
  }

  nav {
    display: flex;
    width: var(--w-full);
    align-items: center;
    justify-content: space-between;

    h1 {
      display: none;
    }

    @media (max-width: 768px) {
      gap: var(--spacing-5);
    }

    div {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    a {
      color: var(--gray-white);
      text-decoration: none;
      transition: var(--transition);

      &.component {
        color: var(--gray-500);
      }
    }

    section {
      display: flex;
      align-items: center;
      gap: var(--spacing-5);

      @media (max-width: 768px) {
        flex-direction: column;
        align-items: start;
      }
    }
  }

  h1 {
    padding: var(--spacing-11) var(--spacing-0);
    font-size: var(--font-6xl);
    font-weight: var(--weight-extrabold);
    color: var(--gray-white);
    transition: var(--transition);
    line-height: var(--spacing-20);

    &.component {
      color: var(--gray-500);
    }

    @media (max-width: 768px) {
      padding: var(--spacing-0) var(--spacing-0);
      font-size: var(--font-4xl);
    }
  }
}
</style>
