<script setup lang="ts">
import { DoorFrontFilled } from '@vicons/material'
import { DoorOpen } from '@vicons/fa'
import { Key24Regular } from '@vicons/fluent'
import { Icon } from '@vicons/utils'
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router'
import { NIcon, useMessage } from 'naive-ui'
import { h } from 'vue'

const router = useRouter()

const message = useMessage()

const isFoundKey = ref(false)

const keyColorClass = computed(() => {
  return {
    'gold-color': isFoundKey.value
  }
})


const goToLogin = () => {
  if (isFoundKey.value) {
    router.push('/login')
    return
  }
  message.create(
    "Дверь закрыта, куда же подевался ключ?",
    {
      icon: () => h(NIcon, null, { default: () => h(Key24Regular) })
    }
  )
}
</script>

<!-- Главная страница -->
<template>
  <header class="header">
    <p @click="goToLogin" class="btn-login">

      <Icon v-if="isFoundKey" class="door-icon">
        <DoorOpen />
      </Icon>
      <Icon v-else class="door-icon">
        <DoorFrontFilled />
      </Icon>

      Войти
    </p>
  </header>

  <main>
    <h1 class="font-text">
      Вечерний детектив
    </h1>
    <h3 class="font-text">
      Дело №0
    </h3>
    <p class="content-text">
      Поиграем?
      <Icon class="key-icon" :class="keyColorClass" @click="isFoundKey = !isFoundKey">
        <Key24Regular />
      </Icon>
    </p>
  </main>
</template>

<style lang="css">
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
}

.btn-login {
  position: fixed;
  top: 0;
  right: 0;
  padding: 8px 14px;
  cursor: pointer;
  user-select: none;
}

.font-text {
  font-family: font_old_typer;
}

.content-text {
  position: relative;
  top: 100px;
  right: 0px;
}

.key-icon {
  position: relative;
  top: 3px;
  cursor: pointer;
}

.door-icon {
  position: relative;
  top: 3px;
}

.gold-color {
  color: gold;
}

@media (min-width: 1024px) {
  .font-text {
    position: relative;
    left: -150px;
  }

  .content-text {
    position: relative;
    top: 100px;
    right: -350px;
  }
}
</style>
