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

import * as domtools from '@design.estate/dees-domtools';
import { DeesContextmenu } from './dees-contextmenu.js';

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

  // INSTANCE
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        color: ${cssManager.bdTheme('#333', '#fff')};
        position: relative;
        display: block;
        width: 100%;
        max-width: 300px;
        height: 100%;
        background: ${cssManager.bdTheme('#f8f8f8', '#111c28')};
        font-family: 'Intel One Mono', sans-serif;
        border-left: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
        cursor: default;
      }
      .maincontainer {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
      }

      .topbar {
        position: absolute;
        top: 0px;
        height: 32px;
        width: 100%;
        padding: 0px 12px 0px 12px;
        background: ${cssManager.bdTheme('#ffffff', '#0e151f')};
        border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
      }

      .topbar .heading {
        text-align: left;
        line-height: 24px;
        padding-top: 8px;
        font-weight: 500;
        font-size: 14px;
        font-family: 'Geist Sans', sans-serif;
        color: ${cssManager.bdTheme('#666', '#ccc')};
      }

      .activityContainer {
        position: absolute;
        top: 32px;
        bottom: 40px;
        width: 100%;
        padding: 8px 0px;
        overflow-y: scroll;

      }

      .streamingIndicator {
        font-size: 12px;
        text-align: center;
        padding-top: 16px;
        color: ${cssManager.bdTheme('#666', '#888')}
      }

      .streamingIndicator.bottom {
        padding-top: 0px;
        padding-bottom: 16px;
      }

      .activityentry {
        min-height: 30px;
        font-size: 12px;
        padding: 8px 16px;
        border-bottom: 1px dotted ${cssManager.bdTheme('#00000020', '#ffffff20')};
      }

      .activityentry:last-of-type {
        border-bottom: 1px solid transparent;
      }

      .activityentry:hover {
        background: ${cssManager.bdTheme('#00000005', '#00000080')};
      }

      .timestamp {
        color: ${cssManager.bdTheme('#e57373', '#ff8787')};
      }

      .searchbox {
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 40px;
        background: ${cssManager.bdTheme('#ffffff', '#0e151f')};
        border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
      }
      .searchbox input {
        color: ${cssManager.bdTheme('#333', '#fff')};
        background: none;
        width: 100%;
        height: 40px;
        line-height: 32px;
        border: none;
        padding: 4px 12px;
        font-family: 'Intel One Mono', sans-serif;
      }

      .searchbox input:focus {
        outline: none;
      }

      .bottomShadow {
        position: absolute;
        width: 100%;
        height: 32px;
        bottom: 40px;
        background: ${cssManager.bdTheme(
          'linear-gradient(180deg, #f8f8f800 0%, #ffffff 100%)',
          'linear-gradient(180deg, #111c2800 0%, #0e151f 100%)'
        )};
        pointer-events: none;
      }
      .topShadow {
        position: absolute;
        width: 100%;
        height: 32px;
        top: 32px;
        background: ${cssManager.bdTheme(
          'linear-gradient(0deg, #f8f8f800 0%, #ffffff 100%)',
          'linear-gradient(0deg, #111c2800 0%, #0e151f 100%)'
        )};
        pointer-events: none;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
      <style></style>
      <div class="maincontainer">
        <div class="topbar">
          <div class="heading">Activity Log</div>
        </div>
        <div class="activityContainer">
          <div class="streamingIndicator">streaming...</div>
          <div class="activityentry" @contextmenu=${async eventArg => {
            DeesContextmenu.openContextMenuWithOptions(eventArg, [
              {
                name: 'app settings',
                action: async () => {},
              },
              {
                name: 'account settings',
                action: async () => {},
              },
              {
                name: 'logout',
                action: async () => {},
              },
            ]);
          }}>
            <span class="timestamp">22:01:</span> Max Mustermann logged in
          </div>
          <div class="activityentry">
            <span class="timestamp">22:02:</span> Max Mustermann viewed an invoice
          </div>
          <div class="activityentry">
            <span class="timestamp">22:03:</span> Max Mustermann added a new contact
          </div>
          <div class="activityentry">
            <span class="timestamp">22:04:</span> Max Mustermann updated account settings
          </div>
          <div class="activityentry">
            <span class="timestamp">22:05:</span> Max Mustermann logged out
          </div>
          <div class="activityentry">
            <span class="timestamp">22:06:</span> Max Mustermann logged in
          </div>
          <div class="activityentry">
            <span class="timestamp">22:07:</span> Max Mustermann created a new invoice
          </div>
          <div class="activityentry">
            <span class="timestamp">22:08:</span> Max Mustermann sent an invoice
          </div>
          <div class="activityentry">
            <span class="timestamp">22:09:</span> Max Mustermann viewed reports
          </div>
          <div class="activityentry">
            <span class="timestamp">22:10:</span> Max Mustermann logged out
          </div>
          <div class="activityentry">
            <span class="timestamp">22:11:</span> Max Mustermann logged in
          </div>
          <div class="activityentry">
            <span class="timestamp">22:12:</span> Max Mustermann deleted an invoice
          </div>
          <div class="activityentry">
            <span class="timestamp">22:13:</span> Max Mustermann contacted support
          </div>
          <div class="activityentry">
            <span class="timestamp">22:14:</span> Max Mustermann added a new user
          </div>
          <div class="activityentry">
            <span class="timestamp">22:15:</span> Max Mustermann changed password
          </div>
          <div class="activityentry">
            <span class="timestamp">22:16:</span> Max Mustermann logged out
          </div>
          <div class="activityentry">
            <span class="timestamp">22:17:</span> Max Mustermann logged in
          </div>
          <div class="activityentry">
            <span class="timestamp">22:18:</span> Max Mustermann archived an invoice
          </div>
          <div class="activityentry">
            <span class="timestamp">22:19:</span> Max Mustermann approved a payment
          </div>
          <div class="activityentry">
            <span class="timestamp">22:20:</span> Max Mustermann logged out
          </div>
          <div class="streamingIndicator bottom">loading more...</div>
        </div>
        <div class="searchbox">
          <input type="text" placeholder="Search" />
        </div>
        <div class="topShadow"></div>
        <div class="bottomShadow"></div>
      </div>
    `;
  }
}