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

import { computed, useSlots } from 'vue';

import { useRefresh } from '@easyflow/hooks';
import { RotateCw } from '@easyflow/icons';
import { preferences, usePreferences } from '@easyflow/preferences';
import { useAccessStore } from '@easyflow/stores';

import {
  EasyFlowFullScreen,
  EasyFlowIconButton,
} from '@easyflow-core/shadcn-ui';

import {
  GlobalSearch,
  LanguageToggle,
  PreferencesButton,
  ThemeToggle,
  TimezoneButton,
} from '../../widgets';

interface Props {
  /**
   * Logo 主题
   */
  theme?: string;
}

defineOptions({
  name: 'LayoutHeader',
});

withDefaults(defineProps<Props>(), {
  theme: 'light',
});

const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();

const REFERENCE_VALUE = 50;
const toolbarButtonClass =
  'mr-1 flex h-9 w-9 items-center justify-center rounded-2xl text-[hsl(var(--nav-item-muted-foreground))] backdrop-blur-xl transition-[background-color,color,transform,box-shadow,border-color] hover:-translate-y-0.5 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary))/0.2]';
const toolbarButtonStyle: 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.8))',
  border: '1px solid transparent',
  boxShadow: '0 18px 36px -28px hsl(var(--primary) / 0.24)',
};

const accessStore = useAccessStore();
const { globalSearchShortcutKey, preferencesButtonPosition } = usePreferences();
const slots = useSlots();
const { refresh } = useRefresh();

const rightSlots = computed(() => {
  const list = [{ index: REFERENCE_VALUE + 100, name: 'user-dropdown' }];
  if (preferences.widget.globalSearch) {
    list.push({
      index: REFERENCE_VALUE,
      name: 'global-search',
    });
  }

  if (preferencesButtonPosition.value.header) {
    list.push({
      index: REFERENCE_VALUE + 10,
      name: 'preferences',
    });
  }
  if (preferences.widget.themeToggle) {
    list.push({
      index: REFERENCE_VALUE + 20,
      name: 'theme-toggle',
    });
  }
  if (preferences.widget.languageToggle) {
    list.push({
      index: REFERENCE_VALUE + 30,
      name: 'language-toggle',
    });
  }
  if (preferences.widget.timezone) {
    list.push({
      index: REFERENCE_VALUE + 40,
      name: 'timezone',
    });
  }
  if (preferences.widget.fullscreen) {
    list.push({
      index: REFERENCE_VALUE + 50,
      name: 'fullscreen',
    });
  }
  if (preferences.widget.notification) {
    list.push({
      index: REFERENCE_VALUE + 60,
      name: 'notification',
    });
  }

  Object.keys(slots).forEach((key) => {
    const name = key.split('-');
    if (key.startsWith('header-right')) {
      list.push({ index: Number(name[2]), name: key });
    }
  });
  return list.sort((a, b) => a.index - b.index);
});

const leftSlots = computed(() => {
  const list: Array<{ index: number; name: string }> = [];

  if (preferences.widget.refresh) {
    list.push({
      index: 0,
      name: 'refresh',
    });
  }

  Object.keys(slots).forEach((key) => {
    const name = key.split('-');
    if (key.startsWith('header-left')) {
      list.push({ index: Number(name[2]), name: key });
    }
  });
  return list.sort((a, b) => a.index - b.index);
});

function clearPreferencesAndLogout() {
  emit('clearPreferencesAndLogout');
}
</script>

<template>
  <div
    v-if="$slots.breadcrumb"
    class="hidden min-w-0 max-w-[min(520px,46vw)] items-center px-2 py-1 lg:flex"
  >
    <slot name="breadcrumb"></slot>
  </div>
  <template v-for="slot in leftSlots" :key="slot.name">
    <slot :name="slot.name">
      <template v-if="slot.name === 'refresh'">
        <EasyFlowIconButton
          :class="toolbarButtonClass"
          :style="toolbarButtonStyle"
          @click="refresh"
        >
          <RotateCw class="size-4" />
        </EasyFlowIconButton>
      </template>
    </slot>
  </template>
  <div
    :class="`menu-align-${preferences.header.menuAlign}`"
    class="flex h-full min-w-0 flex-1 items-center px-2"
  >
    <slot name="menu"></slot>
  </div>
  <div class="flex h-full min-w-0 flex-shrink-0 items-center gap-1 px-1 py-1">
    <template v-for="slot in rightSlots" :key="slot.name">
      <slot :name="slot.name">
        <template v-if="slot.name === 'global-search'">
          <GlobalSearch
            :enable-shortcut-key="globalSearchShortcutKey"
            :menus="accessStore.accessMenus"
            class="mr-0"
          />
        </template>

        <template v-else-if="slot.name === 'preferences'">
          <PreferencesButton
            :class="toolbarButtonClass"
            :style="toolbarButtonStyle"
            @clear-preferences-and-logout="clearPreferencesAndLogout"
          />
        </template>
        <template v-else-if="slot.name === 'theme-toggle'">
          <ThemeToggle
            :class="toolbarButtonClass"
            :style="toolbarButtonStyle"
          />
        </template>
        <template v-else-if="slot.name === 'language-toggle'">
          <LanguageToggle
            :class="toolbarButtonClass"
            :style="toolbarButtonStyle"
          />
        </template>
        <template v-else-if="slot.name === 'fullscreen'">
          <EasyFlowFullScreen
            :class="toolbarButtonClass"
            :style="toolbarButtonStyle"
          />
        </template>
        <template v-else-if="slot.name === 'timezone'">
          <TimezoneButton
            :class="toolbarButtonClass"
            :style="toolbarButtonStyle"
          />
        </template>
      </slot>
    </template>
  </div>
</template>
<style lang="scss" scoped>
.menu-align-start {
  --menu-align: start;
}

.menu-align-center {
  --menu-align: center;
}

.menu-align-end {
  --menu-align: end;
}
</style>
