import { css } from "@linaria/core";
import { queenApi } from "queenjs";
import { string } from "vue-types";
import { useEditor } from "../../../..";
import { createUIComp } from "../../defines/createUIComp";

export const Image = createUIComp({
  props: {
    value: string().def(""),
  },
  emits: ["update:value"],
  setup(props, { emit }) {
    const { store } = useEditor();
    async function changeVal() {
      const files = await queenApi.selectFile();
      emit("update:value", URL.createObjectURL(files[0]));
    }
    return () => (
      <img
        class="w-1/1 h-1/1"
        src={props.value}
        onClick={store.isEditMode ? changeVal : undefined}
      />
    );
  },
});

const btnStyle = css`
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  width: 0.6rem;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
  cursor: pointer;

  &:hover {
    display: block;
  }
`;