import { SdInputValidate } from "@simplysm/sd-angular";
import { ChangeDetectionStrategy, Component, HostBinding, HostListener, Input } from "@angular/core";

@Component({
  selector: "sdm-busy-container",
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="_screen">
      <div class="_bar"></div>
      <div class="_spinner">
        <div class="_cube1"></div>
        <div class="_cube2"></div>
        <div class="_cube4"></div>
        <div class="_cube3"></div>
      </div>
      <div class="_progress" *ngIf="progressPercent !== undefined">
        <div class="_progress-bar" [style.transform]="'scaleX(' + (progressPercent / 100) + ')'"></div>
      </div>
    </div>
    <ng-content></ng-content>`,
  styles: [/* language=SCSS */ `
    :host {
      display: block;
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      min-width: 70px;
      min-height: 70px;
      overflow: auto;

      > ._screen {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: var(--z-index-busy);

        background: rgba(255, 255, 255, .3);
        visibility: hidden;
        backdrop-filter: none;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s, backdrop-filter 5s;

        > ._progress {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          height: 2px;
          width: 100%;
          background-color: white;

          > ._progress-bar {
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            content: "";
            height: 2px;
            width: 100%;
            transition: .1s ease-in;
            transition-property: transform;
            transform-origin: left;
            transform: scaleX(0);
            background-color: var(--theme-color-primary-default);
          }
        }
      }

      &[sd-busy=true] {
        > ._screen {
          visibility: visible;
          backdrop-filter: blur(10px);
          opacity: 1;
          pointer-events: auto;

          > ._bar {
            &:before,
            &:after {
              position: absolute;
              top: 0;
              left: 0;
              display: inline-block;
              content: "";
              height: 2px;
              width: 100%;

              transform-origin: left;
            }

            &:before {
              background-color: var(--theme-color-primary-default);
              animation: _sd-busy-bar-indicator-before 2s infinite ease-in;
            }

            &:after {
              background-color: white;
              animation: _sd-busy-bar-indicator-after 2s infinite ease-out;
            }
          }

          > ._spinner {
            position: absolute;
            top: calc(50% - 30px);
            left: calc(50% - 30px);
            width: 60px;
            height: 60px;
            transform: rotateZ(45deg);

            ._cube1, ._cube2, ._cube3, ._cube4 {
              float: left;
              width: 50%;
              height: 50%;
              position: relative;

              &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: var(--theme-color-grey-lighter);
                animation: _sd-busy-spin 2.4s infinite linear both;
                transform-origin: 100% 100%;
              }
            }

            ._cube2 {
              transform: rotateZ(90deg);

              &:before {
                animation-delay: 0.3s;
              }
            }

            ._cube3 {
              transform: rotateZ(180deg);

              &:before {
                animation-delay: 0.6s;
              }
            }

            ._cube4 {
              transform: rotateZ(270deg);

              &:before {
                animation-delay: 0.9s;
              }
            }
          }

          > ._message {
            position: absolute;
            top: 2px;
            right: 0;
            display: inline-block;
          }
        }
      }
    }

    @keyframes _sd-busy-spin {
      0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
      }
      25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
      }
      90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
      }
    }

    @keyframes _sd-busy-bar-indicator-before {
      0% {
        transform: scaleX(0);
      }
      60%, 100% {
        transform: scaleX(1.0);
      }
    }

    @keyframes _sd-busy-bar-indicator-after {
      0%, 50% {
        transform: scaleX(0);
      }
      100% {
        transform: scaleX(1.0);
      }
    }
  `]
})
export class SdmBusyContainerControl {
  @Input()
  @SdInputValidate(Boolean)
  @HostBinding("attr.sd-busy")
  public busy?: boolean;

  @Input()
  @SdInputValidate(String)
  public message?: string;

  @Input()
  @SdInputValidate(Number)
  public progressPercent?: number;

  @HostListener("keydown", ["$event"])
  public onKeydown(event: KeyboardEvent): void {
    if (this.busy) {
      event.preventDefault();
      event.stopPropagation();
    }
  }
}