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

declare global {
  interface HTMLElementTagNameMap {
    'idp-mobile-frame': IdpMobileFrame;
  }
}

@customElement('idp-mobile-frame')
export class IdpMobileFrame extends DeesElement {
  public static demo = () => html`
    <idp-mobile-frame>
      <div style="height: 100%; background: #fff; padding: 72px 20px 20px; box-sizing: border-box;">Screen content</div>
    </idp-mobile-frame>
  `;
  public static demoGroups = ['idp.global v3 device frames'];

  @property({ type: String })
  public accessor time = '9:41';

  @property({ type: Boolean, reflect: true })
  public accessor dark = false;

  public static styles = [
    ...idpElementStyles,
    css`
      :host {
        display: inline-block;
      }
      .device {
        position: relative;
        width: 402px;
        height: 874px;
        max-width: 100%;
        border-radius: 48px;
        overflow: hidden;
        background: var(--idp-bg);
        box-shadow: 0 40px 80px rgb(0 0 0 / 0.18), 0 0 0 1px rgb(0 0 0 / 0.12);
      }
      .island {
        position: absolute;
        top: 11px;
        left: 50%;
        z-index: 50;
        width: 126px;
        height: 37px;
        transform: translateX(-50%);
        border-radius: 24px;
        background: #000;
      }
      .status {
        position: absolute;
        inset: 0 0 auto;
        z-index: 40;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 28px 0;
        box-sizing: border-box;
        color: var(--idp-fg);
        font-size: 15px;
        font-weight: 650;
        pointer-events: none;
      }
      .status-icons {
        display: inline-flex;
        align-items: center;
        gap: 7px;
      }
      .bar {
        width: 4px;
        border-radius: 999px;
        background: currentColor;
      }
      .screen {
        height: 100%;
        overflow: hidden;
      }
      .home {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        height: 34px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding-bottom: 8px;
        pointer-events: none;
      }
      .home::before {
        content: '';
        width: 139px;
        height: 5px;
        border-radius: 100px;
        background: color-mix(in srgb, var(--idp-fg), transparent 72%);
      }
      @media (max-width: 520px) {
        :host {
          display: block;
          width: 100%;
        }
        .device {
          width: 100%;
          height: auto;
          aspect-ratio: 402 / 874;
          border-radius: 0;
        }
        .island {
          display: none;
        }
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="device">
        <div class="island"></div>
        <div class="status">
          <span>${this.time}</span>
          <span class="status-icons" aria-hidden="true">
            <span class="bar" style="height: 5px"></span>
            <span class="bar" style="height: 8px"></span>
            <span class="bar" style="height: 11px"></span>
            <span style="width: 24px; height: 12px; border: 1.5px solid currentColor; border-radius: 4px;"></span>
          </span>
        </div>
        <div class="screen"><slot></slot></div>
        <div class="home"></div>
      </div>
    `;
  }
}