import { createElement } from 'react'
import { addons } from 'storybook/manager-api'
import { create } from 'storybook/theming'
import { decorateHanmacNavigation } from './manager-navigation.js'

// Match the measured Manager content background via its existing CSS variable.
// Keep mobile navigation, addon tabs,
// portalled menus and the preview iframe outside this toolbar scope.
const toolbarStyle = document.createElement('style')
toolbarStyle.id = 'hm-manager-toolbar-style'
toolbarStyle.textContent = `
  .sb-bar[data-testid="sb-preview-toolbar"] {
    background: var(--color-bg-content);
    color: #000000;
  }
  .sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"], label, span, p, svg) {
    color: inherit;
  }
  .sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"]):hover {
    background: rgba(0, 0, 0, 0.10);
  }
  .sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"]):is([aria-checked="true"], [aria-expanded="true"], [aria-selected="true"]) {
    background: rgba(0, 0, 0, 0.20);
  }
  .sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"]):focus-visible {
    outline-color: currentColor;
  }
`
document.head.appendChild(toolbarStyle)

addons.setConfig({
  layout: {
    showPanel: false,
  },
  theme: create({
    base: 'light',
    brandTitle: 'HM Design System',
    brandUrl: './',
    brandTarget: '_self',
    fontBase: "'Hanmac Manager Noto Sans KR', 'Noto Sans KR', 'Malgun Gothic', sans-serif",
    colorPrimary: '#123328',
    colorSecondary: '#123328',
    appBg: '#F5F0E5',
    appContentBg: '#FFFFFF',
    appPreviewBg: '#FFFFFF',
    textColor: '#123328',
    textInverseColor: '#FFFFFF',
    barSelectedColor: '#123328',
  }),
  sidebar: {
    renderLabel: (item) => createElement('span', { className: 'hm-manager-label' }, item.name),
  },
})

addons.register('hm/manager-navigation-style', decorateHanmacNavigation)