import { css } from "@linaria/core";
import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
import { useCtx } from "../../context";
import { ShowItem } from "@/modules/list/state";
import Dialog from "../list/dialog";
import { conformsTo, divide } from "lodash";
import dialog from "@/modules/list/actions/dialog";
import { nextTick } from "process";

export default defineComponent({
  setup() {
    const ctx = useCtx();
    const { list } = ctx;
    const canvasRef = ref();

    const rootRef = ref<HTMLElement>();

    onMounted(async () => {
      await list.actions.initListCanvasDatas(
        rootRef.value?.clientWidth as number,
        rootRef.value?.clientHeight as number
      );
      list.actions.startListRunning(canvasRef.value);
    });

    return () => (
      <div class={rootStyle} ref={rootRef}>
        <canvas ref={canvasRef} />

        {list.state.dialogs.map((item) => (
          <Dialog data={item} key={item.id} />
        ))}
      </div>
    );
  },
});

const rootStyle = css`
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  background-color: #3f322c;
  overflow: hidden;
  user-select: none;
  flex-flow: row;
  canvas {
    width: 100%;
    height: 100%;
    /* background-color: #fff; */
  }
`;
