import { defineComponent } from "vue";
import { string } from "vue-types";
import { useCompData } from ".";
import { View } from "../View";
import { useEditor } from "@/modules/editor";
import { IconPicture } from "@queenjs/icons";
import { css } from "@linaria/core";

export const Component = defineComponent({
  props: {
    compId: string().isRequired,
  },
  setup(props) {
    const { store, controls } = useEditor();
    const { value } = useCompData(props.compId);

    async function changeVal() {
      const url = await controls.pickCtrl.pickOneImage();
      if (!url) return;
      value.url = url;
    }

    return () => {
      const options: any = {};
      if (value.autoplay) options.autoplay = true;
      if (value.loop) options.loop = true;
      if (value.controls) options.controls = true;

      return (
        <View class={rootCls} compId={props.compId}>
          <video
            class="w-full object-cover"
            src={value.url}
            style={{ aspectRatio: value.ratio }}
            {...options}
          />
          {store.isEditMode && (
            <IconPicture class={btnCls} onClick={changeVal} />
          )}
        </View>
      );
    };
  },
});

const btnCls = css`
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0.4rem;
  font-size: 0.75rem;
  color: #666;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  transform: translate(-50%, -50%);
  @apply shadow;
`;

const rootCls = css`
  &:hover {
    .${btnCls} {
      display: block;
    }
  }
`;