import { useEditor } from "@/modules/editor";
import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";

import { css } from "@linaria/core";
import { defineComponent, toRaw, watch, nextTick} from "vue";
import { any } from "vue-types";
import { Divider } from "ant-design-vue";
import {
  AlignComp,
  FontFamily,
  FontSize,
  FontStyleWapper,
  LetterSpacingComp,
  LineHeightComp,
  TextToolItem,
  TextColor,
  TextStroke,
} from "./TextToolComp";
import { history } from "@/modules/editor/objects/DesignTemp/factory";
import { designSizeToPx } from "@/modules/editor/module/utils";

export const TextToolForm = defineComponent({
  props: {
    component: any<DesignComp>().isRequired,
  },
  setup(props) {
    const { controls, store , helper} = useEditor();

    const changeVal = (e: { dataIndex: string; value: any }) => {
      let editor = controls.textEditorCtrl.state.currEditor;
      if (!editor) {
        controls.textEditorCtrl.setCompValueInReg(e.dataIndex, e.value);
        return;
      }
      editor = toRaw(editor);
      editor.execute(e.dataIndex, e.value);
      console.log("change", e);
      setTimeout(() => {
        const selection = window.getSelection();
        selection?.removeAllRanges();
        editor.editing.view.focus();
      }, 100);
    };

    watch(
      () => store.currComp.value.text,
      () => {
        const editor = toRaw(controls.textEditorCtrl.state.currEditor);
        if (!editor && store.currComp.compKey == "Text") {
   
          nextTick(() => {
            const element: HTMLElement | null = document.querySelector(
              `#editor_${store.currComp.id}`
            );
            if (!element) {
              return;
            }
            const h = helper.pxToDesignSize(element.clientHeight);
            const size :any = store.currComp.layout.size.slice(0);
            size[1] = h;

            console.log("xxxxxxxxxxxxxxxxx");

            controls.selectCtrl.gizmo.selected[0].setSize(designSizeToPx(size[0]), designSizeToPx(h))

            helper.extendStreamCard(controls.pageCtrl.currStreamCardId);
          });
        }
      }
    );
    return () => {
      return (
        <div id="text_toolform">
          <div class={"text-white"}>文本</div>
          <div class={"mt-18px"}>
            <div class={formRowItem}>
              <TextToolItem
                column={{
                  dataIndex: "fontFamily",
                  component: FontFamily,
                  props: {
                    class: "w-190px",
                  },
                }}
                onChange={changeVal}
              />
              <TextToolItem
                column={{
                  label: "字号",
                  dataIndex: "fontSize",
                  component: FontSize,
                  props: {
                    class: "!w-full",
                  },
                }}
                onChange={changeVal}
              />
            </div>
            <div class={formRowItem}>
              <TextToolItem
                column={{
                  label: "字间距",
                  dataIndex: "letterSpacing",
                  component: LetterSpacingComp,
                  props: {
                    class: "!w-full",
                  },
                }}
                onChange={changeVal}
              />
              <TextToolItem
                column={{
                  label: "行高",
                  dataIndex: "lineHeight",
                  component: LineHeightComp,
                  props: {
                    class: "!w-full",
                  },
                }}
                onChange={changeVal}
              />
            </div>
            <div class={formRowItem}>
              <FontStyleWapper onChange={changeVal} />
              <TextToolItem
                column={{
                  label: "",
                  dataIndex: "alignment",
                  component: AlignComp,
                }}
                onChange={changeVal}
              />
            </div>
          </div>
          <Divider class={"!my-18px"} />
          <div class={[FormLabelItem, "justify-between mb-20px"]}>
            <div class={"label"}>颜色</div>
            <div>
              <TextToolItem
                column={{
                  label: "字体颜色",
                  dataIndex: "fontColor",
                  component: TextColor,
                }}
                onChange={changeVal}
              />
            </div>
          </div>
          <div class={FormLabelItem}>
            <div class={"label"}>描边</div>
            <TextToolItem
              column={{
                label: "",
                dataIndex: "textStroke",
                component: TextStroke,
              }}
              onChange={changeVal}
            />
          </div>
          <Divider class={"!my-18px"} />
        </div>
      );
    };
  },
});
const formRowItem = css`
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  &:last-child {
    margin-bottom: 0;
  }
`;
const FormLabelItem = css`
  display: flex;
  align-items: center;
  .label {
    min-width: 60px;
    margin-right: 10px;
    user-select: none;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
  }
`;