import { useEditor } from "@/modules/editor";
import { css } from "@linaria/core";
import { defineComponent } from "vue";
import { string } from "vue-types";

export const ImagePicker = defineComponent({
  props: {
    value: string(),
  },
  emits: ["change"],
  setup(props, { emit }) {
    const { controls } = useEditor();

    async function changeVal() {  
      const url = await controls.pickCtrl.pickOneImage();
      if (url) {
        const pre = "https:////";
        let u = url;
        if (url.indexOf(pre) == 0 ) {
          u = "https://" + url.substr(pre.length);
        }
        console.log("url=>", u);
        emit("change", u);
      }
    }

    return () => (
      <div class={imageStyle} onClick={changeVal}>
        {props.value ? <img src={props.value} /> : <i>＋</i>}
      </div>
    );
  },
});

const imageStyle = css`
  width: 60px;
  height: 60px;
  padding: 6px;
  text-align: center;
  line-height: 60px;
  border: 1px dashed @inf-text-less-color;
  border-radius: 4px;
  box-sizing: content-box;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  i {
    font-style: unset;
    font-size: 36px;
  }
`;
