console.log("hi tl")
import { debug } from "debug";
import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators.js";
export {Light9TimelineAudio} from "../light9-timeline-audio"
debug.enable("*");
/*
 <link rel="import" href="/lib/polymer/polymer.html">
<link rel="import" href="/lib/polymer/lib/utils/render-status.html">
<link rel="import" href="/lib/iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="/lib/iron-ajax/iron-ajax.html">
<link rel="import" href="light9-timeline-audio.html">
<link rel="import" href="../rdfdb-synced-graph.html">
<link rel="import" href="../light9-music.html">
<link rel="import" href="../edit-choice.html">
<link rel="import" href="inline-attrs.html">
    <script src="/websocket.js"></script>
<script type="module" src="/light9-vidref-replay.js"></script>

<script type="module" src="/light9-vidref-replay-stack.js"></script>

*/

// Whole editor- include this on your page.
// Most coordinates are relative to this element.
@customElement("light9-timeline-editor")
export class Light9TimelineEditor extends LitElement {
  render() {
    return html`
    <style>
     :host {
         background: #444;
         display: flex;
         flex-direction: column;
         position: relative;
         border: 1px solid black;
         overflow: hidden;
     }
     light9-timeline-audio {
         width: 100%;
         height: 30px;
     }
     light9-timeline-time-zoomed {
         flex-grow: 1;
     }
     #coveredByDiagram {
         position: relative;
         display: flex;
         flex-direction: column;
         height: 100%;
     }
     #dia, #adjusters, #cursorCanvas, #adjustersCanvas {
         position: absolute;
         left: 0; top: 0; right: 0; bottom: 0;
     }
     #debug {
         background: white;
         font-family: monospace;
         font-size: 125%;
         height: 15px;
     }
     light9-vidref-replay-stack {
             position: absolute;
             bottom: 10px;
             width: 50%;
             background: gray;
             box-shadow: 6px 10px 12px #0000006b;
             display: inline-block;
     }
    </style>
    <div>
      <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>
      <light9-music id="music"
                    song="{{playerSong}}"
                    t="{{songTime}}"
                    playing="{{songPlaying}}"
                    duration="{{songDuration}}"></light9-music>
      timeline editor: song <edit-choice graph="{{graph}}" uri="{{song}}"></edit-choice>
      <label><input type="checkbox" checked="{{followPlayerSong::change}}" > follow player song choice</label>
    </div>
    <div id="debug">[[debug]]</div>
    <iron-ajax id="vidrefTime" url="/vidref/time" method="PUT" content-type="application/json"></iron-ajax>
    <div id="coveredByDiagram">
      <light9-timeline-audio id="audio"
                             graph="{{graph}}"
                             show="{{show}}"
                             song="{{song}}"></light9-timeline-audio>
      <light9-timeline-time-zoomed id="zoomed"
                                   graph="{{graph}}"
                                   project="{{project}}"
                                   selection="{{selection}}"
                                   set-adjuster="{{setAdjuster}}"
                                   song="{{song}}"
                                   show="{{show}}"
                                   view-state="{{viewState}}">
      </light9-timeline-time-zoomed>
      <light9-adjusters-canvas id="adjustersCanvas" set-adjuster="{{setAdjuster}}">
      </light9-adjusters-canvas>
      <light9-cursor-canvas id="cursorCanvas" view-state="{{viewState}}"></light9-cursor-canvas>
      <light9-vidref-replay-stack size="small"></light9-vidref-replay-stack>
    </div>
`;
  }
}

// the whole section that pans/zooms in time (most of the editor)
@customElement("light9-timeline-time-zoomed")
export class Light9TimelineTimeZoomed extends LitElement {
  render() {
    return html`
    <style>
     :host {
         display: flex;
         height: 100%;
         flex-direction: column;
     }
     #top {
     }
     #rows {
         height: 100%;
         overflow: hidden;
     }
     #rows.dragging {
         background: rgba(126, 52, 245, 0.0784);
     }
     light9-timeline-time-axis {
     }
     light9-timeline-audio {
         width: 100%;
         height: 100px;
     }
     light9-timeline-graph-row {
         flex-grow: 1;
     }
    </style>
    <div id="top">
      <light9-timeline-time-axis id="time" view-state="{{viewState}}"></light9-timeline-time-axis>
      <light9-timeline-audio id="audio"
                             graph="{{graph}}"
                             song="{{song}}"
                             show="{{show}}"
                             zoom="{{zoomFlattened}}">
      </light9-timeline-audio>
    </div>
    <div id="rows"></div>
    <template is="dom-repeat" items="{{imageSamples}}">
      <img src="/show/dance2019/anim/rainbow1.png">
    </template>
    <template is="dom-repeat" items="{{inlineAttrConfigs}}">
      <light9-timeline-note-inline-attrs graph="{{graph}}"
                                         project="{{project}}"
                                         selection="{{selection}}"
                                         song="{{song}}"
                                         config="{{item}}">
      </light9-timeline-note-inline-attrs>
    </template>
`;
  } 
}

@customElement("light9-cursor-canvas")
export class Light9CursorCanvas extends LitElement {
  render() {
    return html`
      <style>
        #canvas,
        :host {
          pointer-events: none;
        }
      </style>
      <canvas id="canvas"></canvas>
    `;
  }
}

@customElement("light9-adjusters-canvas")
export class Light9AdjustersCanvas extends LitElement {
  render() {
    return html`
      <style>
        :host {
          pointer-events: none;
        }
      </style>
      <canvas id="canvas"></canvas>
    `;
  }
}      

// seconds labels
@customElement("light9-timeline-time-axis")
export class Light9TimelineTimeAxis extends LitElement {
  render() {
    return html`
      <style>
        :host {
          display: block;
        }
        div {
          width: 100%;
          height: 31px;
        }
        svg {
          width: 100%;
          height: 30px;
        }
      </style>
      <svg id="timeAxis" xmlns="http://www.w3.org/2000/svg">
        <style>
          text {
            fill: white;
            color: white;
            font-size: 135%;
            font-weight: bold;
          }
        </style>
        <g id="axis" transform="translate(0,30)"></g>
      </svg>
    `;
  }
}

// All the adjusters you can edit or select. Tells a light9-adjusters-canvas how to draw them. Probabaly doesn't need to be an element.
//  This element manages their layout and suppresion.
//  Owns the selection.
//  Maybe includes selecting things that don't even have adjusters.
//  Maybe manages the layout of other labels and text too, to avoid overlaps.
@customElement("light9-timeline-adjusters")
export class Light9TimelineAdjusters extends LitElement {
  render() {
    return html`
      <style>
        :host {
          pointer-events: none; /* restored on the individual adjusters */
        }
      </style>
    `;
  }
}

/*
<script src="/lib/async/dist/async.js"></script>
<script src="/lib/shortcut/index.js"></script>
<script src="/lib/underscore/underscore-min.js"></script>
<script src="/node_modules/n3/n3-browser.js"></script> 
<script src="/node_modules/pixi.js/dist/pixi.min.js"></script>
<script src="/node_modules/tinycolor2/dist/tinycolor-min.js"></script>
*/