import * as Rx from "rxjs";
import * as Snabbdom from "snabbdom-pragma";
import { CycleDOMEvent, div, h1, hr, input, label, p, VNode } from "@cycle/dom";
import { DOMSource, makeDOMDriver } from "@cycle/dom/lib/cjs/rxjs";
import { run } from "@cycle/rxjs-run";
import { Observable, from } from "rxjs";
import { map, startWith } from "rxjs/operators";

//想定　40個のボタン

// 正直かなりリアクトで書いた感に欠いてる
type Sources = {
  DOM: DOMSource;
};

type Sinks = {
  DOM: Observable<VNode>;
};

/**
 * アプリケーション
 * @param sources
 * @returns {{DOM: Observable<VNode>}}
 */
export function cardMain(card: CardName) {
  return function main(sources: Sources): Sinks {
    // スライダー入力イベントを取得 ( Intent )
    const input$: Observable<Event> = sources.DOM.select("#" + card).events(
      "mousedown"
    );

    // 入力イベントから現在の状態ないし値を取得 ( Model )
    const value$: Observable<number> = from(input$).pipe(
      map((ev: Event) => {
        const entity = ev.target as HTMLInputElement;
        console.log(entity.value);
        return parseInt((ev.target as HTMLInputElement).value);
      })
    );

    const DEFAULT_VALUE = 50;
    const d = new Date();
    const hun = d.getSeconds();
    const state$ = value$.pipe(startWith(hun));

    // 現在の状態を画面に描画 ( View )
    const vdom$: Observable<VNode> = state$.pipe(
      map((value) => {
        console.log(card);
        return div("hoge")
      })
    );

    // 結果をドライバに出力する ( Sinks )
    return {
      DOM: vdom$
    };
  };
}

export function drackAndDrop(card: CardName) {
  const cardElement = document.getElementById(card);
  const x = cardElement.offsetLeft;
  const y = cardElement.offsetTop;
  const mousedown$ = Rx.fromEvent(cardElement, "mousedown");
  mousedown$.subscribe(mdown);
  //マウスが押された際の関数
  function mdown(e) {
    //drag中はdragってクラスがついてることにしておく
    cardElement.classList.add("drag");
    document.body.addEventListener("mousemove", mmove, false);
  }
  //マウスカーソルが動いたときに発火
  function mmove(e) {
    cardElement.style.top = e.pageY - y + "px";
    cardElement.style.left = e.pageX - x + "px";
    cardElement.addEventListener("mouseup", mup, false);
    document.body.addEventListener("mouseleave", mup, false);
  }
  function mup(e) {
    console.log("mup");
    //ムーブベントハンドラの消去
    document.body.removeEventListener("mousemove", mmove, false);
    cardElement.removeEventListener("mouseup", mup, false);
    cardElement.classList.remove("drag");
  }
}