import { IconResizeY } from "@/assets/icons";
import { TransferCtrl } from "@/modules/editor/controllers/TransferCtrl";
import { css } from "@linaria/core";
import { defineComponent, onMounted, onUnmounted , ref} from "vue";
import { useEditor } from "../../../..";
import { object } from "vue-types";

export const StreamCardTransfer = defineComponent({
  setup() {
    const editor = useEditor();
    const { store, helper } = editor;

    const streamCardTransferCtrl = new TransferCtrl(editor);
    onMounted(() => {
      const pageEl = helper.findRootComp()?.$el;
      if (pageEl) {
        streamCardTransferCtrl.currComp = store.currStreamCard;
        streamCardTransferCtrl.pageEl = pageEl.firstChild as any;
        streamCardTransferCtrl.compEl = streamCardTransferCtrl.currComp?.$el;
        streamCardTransferCtrl.observe();
      }
    });

    onUnmounted(() => {
      streamCardTransferCtrl.destroy();
    });

    return () => {
      const transferStyle = streamCardTransferCtrl.transferStyle;

      return (
        transferStyle.width && (
          <div
            class="transfer absolute z-998"
            style={{
              top: transferStyle.top,
              left: transferStyle.left,
              width: transferStyle.width,
              transform: `translateX(${transferStyle.transform.translateX}) translateY(${transferStyle.transform.translateY})`,
            }}
          >
            <div
              class={borderStyle}
              style={{
                width: transferStyle.width,
                height: transferStyle.height,
              }}
            />
          </div>
        )
      );
    };
  },
});

// const ResizeY = defineComponent({

//   props: {
//     ctrl: object<TransferCtrl>().isRequired,
//   },
//   setup(props) {
//     const editor = useEditor();
//     const { store, helper } = editor;
   
//     const btnRef = ref();
//     onMounted(()=>{
//       btnRef.value.editable = "cardResizeY";
//     })

//     return ()=>(
//       <div ref={btnRef}
//               class={resizeHeightBtnCls}
//               style={{ top: props.ctrl.transferStyle.height }}
//               onMousedown={(e) => {
//                   e.stopPropagation();
//                   props.ctrl.mousedown(e, "resizeY", store.currStreamCard)
//                 }
//               }
//             >
//               <IconResizeY />
//             </div>
//       )
//     }
// })


const borderStyle = css`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: 1px solid @inf-primary-color;
  pointer-events: none;
  /* z-index: 999; */
  box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
`;

const hudStyle = css`
  position: absolute;
  top: 0px;
  left: -46px;
  background-color: white;
  flex-direction: column;
  color: black;
  display: flex;
  font-size: 12px;
  width: 28px;
  align-items: center;
  border-radius: 4px;
  .inficon {
    padding: 8px;
  }
  z-index: 1000;
`;

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

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);
`;

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(-50%, -40px);
  z-index: 999;
`;

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

  .inficon {
    font-size: 20px;
    position: relative;
    top: -6px;
  }
`;

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