<template>
  <header class="flex items-start justify-between h-[40px]">
    <div class="title-bar-main flex-auto">
      <slot>{{ title ?? '' }}</slot>
    </div>

    <div class="title-bar-controls w-[168px] flex items-center justify-end text-tx-secondary">
      <native-tooltip :content="t('window.minimize')">
        <button v-show="isMinimizable"
          class="flex items-center justify-center cursor-pointer w-[40px] h-[40px] hover:bg-[#999] hover:text-[#fff]"
          @click="minimizeWindow">
          <iconify-icon icon="material-symbols:check-indeterminate-small" :color="color" :width="btnSize"
            :height="btnSize" />
        </button>
      </native-tooltip>
      <native-tooltip :content="isMaximized ? t('window.restore') : t('window.maximize')">
        <button v-show="isMaximizable"
          class="flex items-center justify-center cursor-pointer w-[40px] h-[40px] hover:bg-[#999] hover:text-[#fff]"
          @click="maximizeWindow">
          <iconify-icon icon="material-symbols:chrome-maximize-outline-sharp" :color="color" :width="btnSize"
            :height="btnSize" v-show="!isMaximized" />
          <iconify-icon icon="material-symbols:chrome-restore-outline-sharp" :color="color" :width="btnSize"
            :height="btnSize" v-show="isMaximized" />
        </button>
      </native-tooltip>
      <native-tooltip :content="t('window.close')">
        <button v-show="isClosable"
          class="flex items-center justify-center cursor-pointer w-[40px] h-[40px] hover:bg-[#ff0000] hover:text-[#fff]"
          @click="handleClose">
          <iconify-icon icon="material-symbols:close" :color="color" :width="btnSize" :height="btnSize" />
        </button>
      </native-tooltip>
    </div>
  </header>
</template>

<script setup lang="ts">
import { Icon as IconifyIcon } from '@iconify/vue'
import { useWinManager } from '@hooks/useWinManager'

import NativeTooltip from '@components/NativeTooltip/index.vue'

interface HeaderBarProps {
  title?: string;
  isMaximizable?: boolean;
  isMinimizable?: boolean;
  isClosable?: boolean;
  color?: string;
}

defineOptions({ name: 'HeaderBar', color: '#525866' })

withDefaults(defineProps<HeaderBarProps>(), {
  isMaximizable: true,
  isMinimizable: true,
  isClosable: true,
})
const emit = defineEmits(['close']);
const { t } = useI18n();

const btnSize = 16;

const {
  isMaximized,
  closeWindow,
  minimizeWindow,
  maximizeWindow
} = useWinManager();

function handleClose() {
  emit('close');
  closeWindow();
}
</script>

<style scoped></style>
