﻿<template>
  <div>
    <button
        class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 mr-2"
        @click="AboutUs = true"
    >
      <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-information</v-icon>
    </button>

    <v-dialog v-model="AboutUs" max-width="500px">
      <v-card>
        <v-card-title>
          À propos
          <br><br>
          <div class="flex justify-center">{{ creator.about }}</div>
          <br>
        </v-card-title>
        <v-card-text class="scrollable-content">
          {{ creator.description }}
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn text class="ml-auto" @click="AboutUs = false">Fermer</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const AboutUs = ref(false);

const props = defineProps({
  creator: { type: Object, required: true },
});

onMounted(() => {
  const style = document.createElement('style');
  style.innerHTML = `
    .scrollable-content::-webkit-scrollbar-thumb {
      background-color: ${props.creator.colors.menu};
      border-radius: 10px;
    }
    .scrollable-content::-webkit-scrollbar-thumb:hover {
      background-color: ${shadeColor(props.creator.colors.accent, -10)};
    }
  `;
  document.head.appendChild(style);
});

function shadeColor(color, percent) {
  const f = parseInt(color.slice(1), 16),
      t = percent < 0 ? 0 : 255,
      p = percent < 0 ? percent * -1 : percent,
      R = f >> 16,
      G = (f >> 8) & 0x00ff,
      B = f & 0x0000ff;
  return (
      "#" +
      (
          0x1000000 +
          (Math.round((t - R) * p) + R) * 0x10000 +
          (Math.round((t - G) * p) + G) * 0x100 +
          (Math.round((t - B) * p) + B)
      )
          .toString(16)
          .slice(1)
  );
}
</script>

<style scoped>
.scrollable-content {
  max-height: 600px;
  overflow-y: auto;
}

.scrollable-content::-webkit-scrollbar {
  width: 6px;
}

.transparent-btn {
  background-color: transparent;
  color: inherit;
  box-shadow: none;
}
</style>
