import { createAttrsForm } from "../../defines/createAttrsForm";
import { createCompHooks } from "../../defines/createCompHooks";
import { ImagePicker } from "../../formItems/ImagePicker";

export { Component } from "./component";

export const options = {
  name: "视频",
  thumbnail: require("@/modules/editor/assets/icons/video2.svg"),
};

export const { createComp, useCompData } = createCompHooks({
  value: {
    url: "//infishwaibao.oss-cn-chengdu.aliyuncs.com/release/sku3d/media/shoes.1c5c29ad.webm",
    ratio: 1,
    autoplay: true,
    loop: true,
    controls: true,
    poster: "",
  },
  layout: {
    size: [750, 750],
  },
});

export const Form = createAttrsForm([
  // {
  //   label: "视频地址",
  //   dataIndex: "value.url",
  //   component: "Input",
  // },
  {
    label: "封面",
    dataIndex: "value.poster",
    component: ImagePicker,
  },
  {
    label: "视频比例",
    dataIndex: "value.ratio",
    component: "Select",
    props: {
      options: [
        { label: "原始比例", value: 0 },
        { label: "1:1", value: 1 },
        { label: "4:3", value: 4 / 3 },
        { label: "3:4", value: 3 / 4 },
        { label: "16:9", value: 16 / 9 },
        { label: "9:16", value: 9 / 16 },
      ],
    },
  },
  // {
  //   label: "自动播放",
  //   dataIndex: "value.autoplay",
  //   component: "Switch",
  // },
  {
    label: "循环播放",
    dataIndex: "value.loop",
    component: "Switch",
  },
  // {
  //   label: "显示控制器",
  //   dataIndex: "value.controls",
  //   component: "Switch",
  // },
]);