import { CycleDOMEvent, div, h1, hr, input, label, p, VNode } from "@cycle/dom";
import { css } from "emotion";
import * as Snabbdom from "snabbdom-pragma";
import { DOMSource, makeDOMDriver } from "@cycle/dom/lib/cjs/rxjs";
import { run } from "@cycle/rxjs-run";
import { Observable, timer, from } from "rxjs";
import "../stylus/style.styl";
import * as Rx from "rxjs";
import {
  map,
  startWith,
  scan,
  switchMap,
  combineLatest,
  takeUntil
} from "rxjs/operators";

type Sources = {
  DOM: DOMSource;
};

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

/**
 * アプリケーション
 * @param sources
 * @returns {{DOM: Observable<VNode>}}
 **/

function cardMain(card: string) {
  return function main(sources: Sources): Sinks {
    // スライダー入力イベントを取得 ( Intent )
    const input$: Observable<Event> = sources.DOM.select("#" + card).events(
      "mousedown"
    );
    const mouseMove$: Observable<Event> = sources.DOM.select("#" + card).events(
      "mousemove"
    );
    const mouseUp$: Observable<Event> = sources.DOM.select("#" + card).events(
      "mouseup"
    );
    const mouseLeave$: Observable<Event> = sources.DOM.select(
      "#" + card
    ).events("mouseleave");
    const mouseUpLeave$: Observable<Event> = Rx.merge(mouseUp$, mouseLeave$);
    const inputGoniMousemomve$: Observable<Event> = input$
      .pipe(switchMap(() => mouseMove$))
      .pipe(takeUntil(mouseUpLeave$));

    // 入力イベントから現在の状態ないし値を取得 ( Model )
    const value$: Observable<[number, number]> = inputGoniMousemomve$.pipe(
      map((ev: MouseEvent) => {
        return [ev.pageX - 30, ev.pageY - 30];
      })
    );

    const state$ = value$.pipe(startWith([400, 400]));

    const myStyle = css({
      color: "hotpink",
      fontSize: "3rem",
      fontWeight: "bold"
    });

    // 現在の状態を画面に描画 ( View )
    const vdom$: Observable<VNode> = state$.pipe(
      map((value) => {
        console.log(card);
        const styleOfCard = css({
          top: value[1] + "px",
          left: value[0] + "px",
          position: "absolute"
        });
        return (
          <div className={myStyle}>
            <div id={card} className={styleOfCard}>
              {card}
            </div>
          </div>
        );
      })
    );

    // 結果をドライバに出力する ( Sinks )
    return {
      DOM: vdom$
    };
  };
}
function drackAndDrop(card: string) {
  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");
  }
}

// // アプリケーションからの戻り値を受け取るドライバ群を定義
const drivers = {
  DOM: makeDOMDriver("#app-container") // DOM をレンダリングするドライバ
};

// アプリケーションとドライバを結びつける
run(cardMain("裁きの龍"), drivers);