import {
  DeesElement,
  type TemplateResult,
  property,
  customElement,
  html,
  css,
  cssManager,
} from '@design.estate/dees-element';

@customElement('dees-appui-appbar')
export class DeesAppuiBar extends DeesElement {
  public static demo = () => html`<dees-appui-appbar></dees-appui-appbar>`;

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        position: relative;
        height: 100%;
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #202020;
        background: #000000;
        color: #ffffff80;
        font-size: 12px;
        display: grid;
        grid-template-columns:  ${cssManager.cssGridColumns(3, 20)};
      }

      .menus {
        display: flex;
        padding-left: 8px;
        cursor: default;
      }

      .menuItem {
        line-height: 24px;
        padding: 0px 8px;
        margin: 8px 0px;
        border-radius: 4px;
      }

      .menuItem:hover {
        background: #ffffff20;
      }

      .breadcrumbs {
        height: 24px;
        line-height: 24px;
        margin: 8px;
        border-radius: 8px;
        text-align: center;
      }
    `,
  ];

  // INSTANCE
  public render(): TemplateResult {
    return html`
      <div class="menus">
        <div class="menuItem">File</div>
        <div class="menuItem">View</div>
        <div class="menuItem">Help</div>
        <div class="menuItem">Terminal</div>
      </div>
      <div class="breadcrumbs">
        tool:social.io > org:design.estate > prop:lossless.com
      </div>
      <div class="account"></div>
    `;
  }
}