<script setup lang="ts">
import type { CSSProperties } from 'vue';

import { Pin, PinOff } from '@easyflow-core/icons';

const emit = defineEmits<{
  toggle: [value: boolean];
}>();
const expandOnHover = defineModel<boolean>('expandOnHover');
const buttonStyle: CSSProperties = {
  backgroundColor: 'hsl(var(--nav-tool-bg) / 0.92)',
  backgroundImage:
    'linear-gradient(180deg, hsl(var(--nav-tool-bg) / 0.96), hsl(var(--glass-tint) / 0.82))',
  border: '1px solid transparent',
  boxShadow: '0 18px 36px -28px hsl(var(--primary) / 0.24)',
};

function toggleFixed() {
  const nextValue = !expandOnHover.value;
  expandOnHover.value = nextValue;
  emit('toggle', nextValue);
}
</script>

<template>
  <button
    aria-label="切换侧边栏固定状态"
    :style="buttonStyle"
    class="flex-center hover:text-foreground h-9 w-9 rounded-2xl text-[hsl(var(--nav-item-muted-foreground))] backdrop-blur-xl transition-[background-color,color,transform,box-shadow,border-color] duration-200 hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary))/0.2]"
    @click="toggleFixed"
  >
    <PinOff v-if="!expandOnHover" class="size-3.5" />
    <Pin v-else class="size-3.5" />
  </button>
</template>
