import { IconRotate } from "@/assets/icons";
import { CompToolbars } from "@/modules/editor/objects/Toolbars";
import { css } from "@linaria/core";
import { defineComponent, onMounted, onUnmounted, ref, nextTick } from "vue";
import { useEditor } from "../../../..";
import { styles } from "dom7";

export const SelectTransfer = defineComponent({
  setup() {
    const editor = useEditor();
    const { controls, store } = editor;
    const { selectCtrl } = controls;
    const { transferStyle } = selectCtrl;

    const selectRectRef = ref();
    const rotateRef = ref();
    const rotateRef2 = ref();
    const rotateRef3 = ref();
    const scaleBottomrightRef = ref();
    const scaleBottomLeftRef = ref();
    const scaleTopLeftRef = ref();
    const scaleTopRightRef = ref();
    const scaleRightRef = ref();
    const scaleLeftRef = ref();

    const scaleTopRef = ref();
    const scaleBottomRef = ref();

    onMounted(() => {
      nextTick(() => {
        selectRectRef.value.editable = "move";
        rotateRef.value.editable = "rotate";
        rotateRef2.value.editable = "rotate";
        rotateRef3.value.editable = "rotate";
        scaleBottomrightRef.value.editable = "scaleBottomright";

        scaleBottomLeftRef.value.editable = "scaleBottomleft";
        scaleTopLeftRef.value.editable = "scaleTopleft";
        scaleTopRightRef.value.editable = "scaleTopright";
      });
    });

    return () => {
      if (selectCtrl.transferStyle.showOrthScale) {
        nextTick(() => {
          scaleRightRef.value.editable = "scaleright";
          scaleLeftRef.value.editable = "scaleleft";
          scaleTopRef.value.editable = "scaletop";
          scaleBottomRef.value.editable = "scalebottom";
        });
      }

      let toolbarOpts = CompToolbars.default;
      let comp: any = null;
      if (selectCtrl.selected.length == 1) {
        comp = selectCtrl.selected[0].comp;
        //@ts-ignore
        toolbarOpts = CompToolbars[comp.compKey] || toolbarOpts;
      }
      const w = selectCtrl.objContainer?.getBound();
      
      return (
        <div
          class={[
            "absolute transfer z-1000",
            transferStyle.showGizmo ? showgizmo : hideGizmo,
           
          ]}
          style={{
            top: transferStyle.baseCardTop
          }}
        >
          <div
            class={toolbarStyle}
            style={{
              top: w?.y + "px",
              left: w?.x + "px",
            }}
          >
            {comp &&
              toolbarOpts.map((item) => {
                return item.getVisible.call(editor, comp) ? (
                  <item.component
                    class="p-4px"
                    value={item.getValue?.(comp)}
                    onClick={() => item.onClick.call(editor, comp)}
                  />
                ) : null;
              })}
          </div>

          <div
            class={["absolute", selctRectStyle]}
            ref={selectRectRef}
            style={{
              width: transferStyle.width + "px",
              height: transferStyle.height + "px",
              transform: transferStyle.matrix,
              transformOrigin: `0 0`,
            }}
          >
            <div class={borderStyle} />
            <>
              <div
                class={[resizeStyle, scaleBottomRightStyle]}
                style={{ transform: transferStyle.matrixInvert }}
                ref={scaleBottomrightRef}
              />
              <div
                class={[resizeStyle, scaleBottomLeftStyle]}
                style={{ transform: transferStyle.matrixInvert }}
                ref={scaleBottomLeftRef}
              />
              <div
                class={[resizeStyle, scaleTopLeftStyle]}
                style={{ transform: transferStyle.matrixInvert }}
                ref={scaleTopLeftRef}
              />

              <div
                class={[resizeStyle, scaleTopRightStyle]}
                style={{ transform: transferStyle.matrixInvert }}
                ref={scaleTopRightRef}
              />

              <div class={transformBtnsStyle} ref={rotateRef3}>
                <div
                  class={transBtnStyle}
                  ref={rotateRef}
                  style={{ transform: transferStyle.matrixInvert }}
                >
                  <IconRotate ref={rotateRef2} />
                </div>
              </div>

              {transferStyle.showOrthScale && (
                <div
                  class={[resizeHeightBtnCls, scaleTopCls]}
                  ref={scaleTopRef}
                />
              )}
              {transferStyle.showOrthScale && (
                <div
                  class={[resizeHeightBtnCls, scaleBottomCls]}
                  ref={scaleBottomRef}
                />
              )}
              {transferStyle.showOrthScale && (
                <div
                  class={[resizeWidthBtnCls, scaleRightCls]}
                  ref={scaleRightRef}
                />
              )}
              {transferStyle.showOrthScale && (
                <div
                  class={[resizeWidthBtnCls, scaleLeftCls]}
                  ref={scaleLeftRef}
                />
              )}
            </>
          </div>
        </div>
      );
    };
  },
});
const selctRectStyle = css`
  pointer-events: none;
`;
const showgizmo = css`
  display: block;
  left: 0;
  top: 0;
  /* pointer-events: none; */
`;
const hideGizmo = css`
  display: none;
`;

const borderStyle = css`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: 2px solid @inf-primary-color;
  pointer-events: none;
  z-index: 999;
`;

const resizeStyle = css`
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  z-index: 999;
  transform: translate(50%, 50%);
  pointer-events: auto;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
  cursor: nwse-resize;
  &:hover {
    border-color: @inf-primary-color;
  }
`;

const scaleBottomRightStyle = css`
  bottom: -8px;
  right: -8px;
`;
const scaleBottomLeftStyle = css`
  bottom: -8px;
  left: -8px;
`;

const scaleTopLeftStyle = css`
  top: -8px;
  left: -8px;
`;

const scaleTopRightStyle = css`
  top: -8px;
  right: -8px;
`;

const transformBtnsStyle = css`
  @apply space-x-10px whitespace-nowrap;
  position: absolute;
  bottom: 0;
  left: 50%;
  font-size: 16px;
  z-index: 999;
  transform: translate(-50%, 50px);
  pointer-events: auto;
`;

const transBtnStyle = css`
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  line-height: 36px;
  font-size: 20px;
  color: #333;
  @apply shadow cursor-move;

  &:hover {
    color: #fff;
    background-color: @inf-primary-color;
  }
`;

const toolbarStyle = css`
  @apply bg-white shadow rounded space-x-4px p-4px whitespace-nowrap;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(0%, -60px);
  z-index: 999;
`;

const resizeHeightBtnCls = css`
  position: absolute;
  width: 30px;
  height: 8px;
  border-radius: 4px;
  left: 50%;
  transform: translate(-50%, -4px);
  pointer-events: auto;
  cursor: ns-resize;
  background: rgba(255, 255, 255, 0.3);
  &:hover {
    background: @inf-primary-color;
  }
  @apply shadow;
  z-index: 999;
`;

const scaleTopCls = css`
  top: 0;
  transform: translate(-50%, -4px);
`;

const scaleBottomCls = css`
  bottom: 0;
  transform: translate(-50%, 4px);
`;

const resizeWidthBtnCls = css`
  position: absolute;
  width: 8px;
  height: 30px;
  border-radius: 4px;
  pointer-events: auto;
  cursor: ew-resize;
  background: rgba(255, 255, 255, 0.3);
  &:hover {
    background: @inf-primary-color;
  }
  @apply shadow;
  z-index: 999;
`;

const scaleRightCls = css`
  right: 0;
  top: 50%;
  transform: translate(4px, -50%);
`;

const scaleLeftCls = css`
  left: 0;
  top: 50%;
  transform: translate(-4px, -50%);
`;
