import { css } from "@linaria/core";
import { omit, upperFirst } from "lodash";
import { defineComponent } from "vue";
import { string } from "vue-types";
import { useEditor } from "../../..";
import { DesignComp } from "../../../defines/DesignTemp/DesignComp";

export const View = defineComponent({
  props: {
    compId: string(),
  },
  emits: ["dblclick"],
  setup(props, { slots, emit }) {
    const { store, actions, helper } = useEditor();
    const comp =
      (props.compId && store.designCompMap.get(props.compId)) ||
      new DesignComp();

    function createStyle(): any {
      const style: any = {};
      const { textAlign, margin, zIndex } = comp.layout || {};
      if (textAlign) {
        style.textAlign = textAlign;
      }
      // if (offsetY) {
      //   style[`margin` + ((offsetY as number) > 0 ? "Top" : "Bottom")] =
      //     helper.designToNaturalSize(Math.abs(offsetY as number) * -1);
      // }
      if (zIndex) {
        style["zIndex"] = zIndex;
      }

      if (margin) {
        style.margin = margin;
      }
      return style;
    }

    function createContentStyle() {
      const style: any = {};
      const { background, layout } = comp;
      const [w, h] = (layout?.size as number[]) || [];
      if (background) {
        Object.entries(background).forEach(([key, value]) => {
          if (key === "image") {
            value = `url(${value})`;
          }
          style["background" + upperFirst(key)] = value;
        });
      }
      if (layout?.padding) {
        style.padding = layout.padding;
      }

      if (w) style["width"] = helper.designToNaturalSize(w);
      if (h) style["height"] = helper.designToNaturalSize(h);
      // if (layout?.offsetX) {
      //   style["marginLeft"] = helper.designToNaturalSize(
      //     layout.offsetX as number
      //   );
      // }

      return style;
    }

    return () => {
      const isComp = !!props.compId;
      const isSelected = isComp && store.currCompId === props.compId;

      const bgOpts = Object.values(omit(comp.background, ["image", "color"]));
      const bgClasses = bgOpts.length ? `bg-${bgOpts.join(" bg-")}` : "";

      return isComp ? (
        <div
          class={[
            viewStyle,
            store.isEditMode && "view_editing",
            store.isEditMode && isSelected && "view_selected",
            bgClasses,
          ]}
          style={createStyle()}
          onClick={(e) => {
            e.stopPropagation();
            if (isComp && !isSelected) {
              actions.pickComp(props.compId as string);
            }
          }}
          onDblclick={() => emit("dblclick")}
        >
          <div class="view_content" style={createContentStyle()}>
            {slots.default?.()}
          </div>
        </div>
      ) : (
        <div class="view_inside" onDblclick={() => emit("dblclick")}>
          {slots.default?.()}
        </div>
      );
    };
  },
});

const viewStyle = css`
  position: relative;
  font-size: 0;

  &.view_editing {
    .view_content {
      &:hover {
        outline: 1px dashed @inf-primary-color;
      }
    }
    .view_inside:hover {
      outline: 1px dashed @inf-primary-color;
      outline-offset: -1px;
    }
  }

  .view_content {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: no-repeat center / cover;
  }

  &.view_selected {
    > .view_content {
      outline: 1px solid @inf-primary-color;
    }
  }

  .view_inside {
    position: relative;
  }

  .view_content {
    overflow: hidden;
  }
`;