<script setup lang="ts">
import { ref } from "vue";

interface Color {
  name: string;
  var: string;
}

const colors = ref([
  {
    title: "Primary colours",
    subTitle: "Paleta de cores foi criada com base na marca principal da companhia.",
    colors: [
      {
        name: "Primary/50",
        var: "var(--primary-50)",
      },
      {
        name: "Primary/100",
        var: "var(--primary-100)",
      },
      {
        name: "Primary/200",
        var: "var(--primary-200)",
      },
      {
        name: "Primary/300",
        var: "var(--primary-300)",
      },
      {
        name: "Primary/400",
        var: "var(--primary-400)",
      },
      {
        name: "Primary/500",
        var: "var(--primary-500)",
      },
      {
        name: "Primary/600",
        var: "var(--primary-600)",
      },
      {
        name: "Primary/700",
        var: "var(--primary-700)",
      },
      {
        name: "Primary/800",
        var: "var(--primary-800)",
      },
    ],
  },
  {
    title: "Secondary colours",
    subTitle: "Cores secundárias usadas para alertas e botões alternativos da interface",
    colors: [
      {
        name: "Secondary/50",
        var: "var(--secondary-50)",
      },
      {
        name: "Secondary/100",
        var: "var(--secondary-100)",
      },
      {
        name: "Secondary/200",
        var: "var(--secondary-200)",
      },
      {
        name: "Secondary/300",
        var: "var(--secondary-300)",
      },
      {
        name: "Secondary/400",
        var: "var(--secondary-400)",
      },
      {
        name: "Secondary/500",
        var: "var(--secondary-500)",
      },
      {
        name: "Secondary/600",
        var: "var(--secondary-600)",
      },
      {
        name: "Secondary/700",
        var: "var(--secondary-700)",
      },
      {
        name: "Secondary/800",
        var: "var(--secondary-800)",
      },
    ],
  },
  {
    title: "Orange colours",
    subTitle: "Laranja para indicar alerta/atenção",
    colors: [
      {
        name: "Orange/50",
        var: "var(--orange-50)",
      },
      {
        name: "Orange/100",
        var: "var(--orange-100)",
      },
      {
        name: "Orange/200",
        var: "var(--orange-200)",
      },
      {
        name: "Orange/300",
        var: "var(--orange-300)",
      },
      {
        name: "Orange/400",
        var: "var(--orange-400)",
      },
      {
        name: "Orange/500",
        var: "var(--orange-500)",
      },
      {
        name: "Orange/600",
        var: "var(--orange-600)",
      },
      {
        name: "Orange/700",
        var: "var(--orange-700)",
      },
      {
        name: "Orange/800",
        var: "var(--orange-800)",
      },
    ],
  },
  {
    title: "Red colours",
    subTitle: "Vermelho para indicar negativo/erro",
    colors: [
      {
        name: "Red/50",
        var: "var(--red-50)",
      },
      {
        name: "Red/100",
        var: "var(--red-100)",
      },
      {
        name: "Red/200",
        var: "var(--red-200)",
      },
      {
        name: "Red/300",
        var: "var(--red-300)",
      },
      {
        name: "Red/400",
        var: "var(--red-400)",
      },
      {
        name: "Red/500",
        var: "var(--red-500)",
      },
      {
        name: "Red/600",
        var: "var(--red-600)",
      },
      {
        name: "Red/700",
        var: "var(--red-700)",
      },
      {
        name: "Red/800",
        var: "var(--red-800)",
      },
    ],
  },
  {
    title: "Green Dark colours",
    subTitle: "Tons verde para uso auxiliar na interface",
    colors: [
      {
        name: "Dark/50",
        var: "var(--green-dark-50)",
      },
      {
        name: "Dark/100",
        var: "var(--green-dark-100)",
      },
      {
        name: "Dark/200",
        var: "var(--green-dark-200)",
      },
      {
        name: "Dark/300",
        var: "var(--green-dark-300)",
      },
      {
        name: "Dark/400",
        var: "var(--green-dark-400)",
      },
      {
        name: "Dark/500",
        var: "var(--green-dark-500)",
      },
      {
        name: "Dark/600",
        var: "var(--green-dark-600)",
      },
      {
        name: "Dark/700",
        var: "var(--green-dark-700)",
      },
      {
        name: "Dark/800",
        var: "var(--green-dark-800)",
      },
    ],
  },
  {
    title: "Shade of Greys",
    subTitle: "Use tons de cinza para sombras, bordas e linhas.",
    colors: [
      {
        name: "Gray/white",
        var: "var(--gray-white)",
      },
      {
        name: "Gray/50",
        var: "var(--gray-50)",
      },
      {
        name: "Gray/100",
        var: "var(--gray-100)",
      },
      {
        name: "Gray/150",
        var: "var(--gray-150)",
      },
      {
        name: "Gray/200",
        var: "var(--gray-200)",
      },
      {
        name: "Gray/300",
        var: "var(--gray-300)",
      },
      {
        name: "Gray/400",
        var: "var(--gray-400)",
      },
      {
        name: "Gray/500",
        var: "var(--gray-500)",
      },
    ],
  },
]);

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 defineBorder(color: Color): string {
  if (color.name === "Gray/white") return "1px solid var(--gray-50)";

  return `1px solid ${color.var}`;
}

function copyColor(colorVar: string, hex: boolean) {
  let valueToCopy: string;

  if (hex) {
    valueToCopy = convertToHex(colorVar);
  } else {
    valueToCopy = colorVar;
  }

  navigator.clipboard.writeText(valueToCopy).then(
    () => {
      console.log(`Copied to clipboard: ${valueToCopy}`);
    },
    (err) => {
      console.error("Failed to copy: ", err);
    }
  );
}

function fillCurrentColor(name: string): string {
  const blackColorNames = ["Gray/white", "Gray/50", "Gray/100", "Gray/150"];

  const whiteColorNames = [ "Gray/200", "Gray/300", "Gray/400", "Gray/500"];

  const colorLevels = ["50", "100", "200", "300", "400"];

  if (blackColorNames.includes(name)) {
    return "#000000";
  }

  if (whiteColorNames.includes(name)) {
    return "#FFFFFF";
  }

  for (const level of colorLevels) {
    if (name.includes(level)) {
      return "#000000";
    }
  }

  return "#FFFFFF";
}
</script>

<template>
  <section>
    <div class="separate">
      <h1>Verdee colours</h1>
      <h2>
        Nesse pull request, a otimização de performance da renderização do DOM causou a race condition de estados
        estáticos nos componentes da UI. Nesse pull request, a otimização de performance da renderização do DOM causou a
        race condition de estados estáticos nos componentes da UI.
      </h2>
    </div>
    <div v-for="(item, index) in colors" :key="index" class="content-title-and-colors">
      <div class="titles">
        <h3>{{ item.title }}</h3>
        <h4>{{ item.subTitle }}</h4>
      </div>
      <div class="content-colors">
        <div v-for="(color, index2) in item.colors" :key="index2" class="colors">
          <div class="color" :style="{ backgroundColor: color.var, border: `${defineBorder(color)}` }" />
          <div :style="`color:${fillCurrentColor(color.name)};`" class="copy-color" @click="copyColor(color.var, true)">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
              <path
                :fill="fillCurrentColor(color.name)"
                d="M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm0-2h9V4H9zm-4 6q-.825 0-1.412-.587T3 20V6h2v14h11v2zm4-6V4z"
              />
            </svg>
            hex
          </div>
          <div
            :style="`color:${fillCurrentColor(color.name)};`"
            class="copy-color"
            @click="copyColor(color.var, false)"
          >
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
              <path
                :fill="fillCurrentColor(color.name)"
                d="M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm0-2h9V4H9zm-4 6q-.825 0-1.412-.587T3 20V6h2v14h11v2zm4-6V4z"
              />
            </svg>
            var
          </div>
          <div class="text">
            <h5>{{ color.name }}</h5>
            <p>{{ convertToHex(color.var) }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<style lang="scss" scoped>
.separate h2 {
  @media (max-width: 768px) {
    line-height: 1.5;
  }
}
section {
  display: grid;
  gap: var(--spacing-4);
  padding: var(--spacing-7) var(--spacing-20);

  h1 {
    color: var(--gray-50) 0;
    font-size: var(--font-3xl);
    font-weight: var(--weight-bold);
  }

  h2 {
    color: var(--gray-50) 0;
    font-size: var(--font-sm);
    font-weight: var(--weight-medium);
  }

  .content-title-and-colors {
    display: grid;
    gap: var(--spacing-6);
    padding: var(--spacing-8) var(--spacing-0) var(--spacing-14) var(--spacing-0);
    border-top: 1px solid #efefef;

    .titles {
      display: grid;
      gap: var(--spacing-2);
    }
  }

  .content-colors {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    justify-items: center;
    width: var(--w-24);
    height: var(--h-24);
    gap: 25px;

    @media (max-width: 768px) {
      width: calc(100dvw);
      margin: 0 calc(var(--spacing-6) * -1);
      padding: 0 var(--spacing-6);
      height: fit-content;
      overflow-x: auto;
      &::-webkit-scrollbar {
        height: 0px !important;
      }
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
    }

    .colors {
      position: relative;

      .color {
        width: var(--w-24);
        height: var(--h-24);
        border-radius: var(--radius-lg);
        box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
        transition: var(--transition);
      }

      .copy-color {
        display: flex;
        opacity: 0;
        align-items: center;
        position: absolute;
        transition: var(--transition);
        cursor: pointer;
        left: var(--spacing-6);
        user-select: none;

        &:nth-of-type(1n) {
          top: var(--spacing-3-5);
        }

        &:nth-of-type(2n) {
          top: var(--spacing-13);
        }

        svg {
          width: var(--w-5);
        }
      }

      .text {
        h5 {
          color: var(--gray-500);
          font-size: var(--font-sm);
          font-weight: var(--weight-bold);
        }

        p {
          color: var(--gray-200);
          font-size: var(--font-sm);
          font-weight: var(--weight-medium);
        }
      }

      &:hover .copy-color,
      .copy-color:hover {
        opacity: 1;
      }

      &:hover .color,
      .copy-color:hover ~ .color {
        filter: blur(2px);
      }
    }
  }
}
</style>
