import { useEditor } from "@/modules/editor";
import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
import { compMasks } from "@/modules/editor/objects/DesignTemp/creates/CompMasks";
import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
import { Input, InputNumber, Select } from "ant-design-vue";
import { isEmpty } from "lodash";
import { defineComponent } from "vue";
import { any } from "vue-types";
import { GroupNumber } from "../formItems/GroupNumber";
import Slider from "../formItems/Slider";
import { createColorOpts } from "./formOpts/createColorOpts";

export const layoutColumns: ColumnItem[] = [
  {
    label: "尺寸",
    dataIndex: "layout.size",
    component: GroupNumber,
    props: {
      labels: ["宽度", "高度"],
    },
  },
  // {
  //   label: "对齐",
  //   dataIndex: "layout.alignSelf",
  //   component: Select,
  //   props: {
  //     class: "w-full",
  //     options: [
  //       { label: "左对齐", value: "start" },
  //       { label: "居中", value: "center" },
  //       { label: "右对齐", value: "end" },
  //     ],
  //   },
  // },
  // {
  //   label: "外边距",
  //   dataIndex: "layout.margin",
  //   component: "Input",
  // },
  // {
  //   label: "内边距",
  //   dataIndex: "layout.padding",
  //   component: "Input",
  // },
  // {
  //   label: "偏移矩阵",
  //   dataIndex: "layout.transformMatrix",
  //   component: Input,
  // },
  // {
  //   label: "上下偏移",
  //   dataIndex: "layout.offsetY",
  //   component: "Slider",
  //   props: {
  //     min: -375,
  //     max: 375,
  //   },
  //   getValue: (v) => v || 0,
  // },
  // {
  //   label: "层级",
  //   dataIndex: "layout.zIndex",
  //   component: InputNumber,
  //   props: {
  //     min: 0,
  //     max: 99,
  //   },
  // },
  // {
  //   label: "遮罩",
  //   dataIndex: "layout.mask",
  //   component: Select,
  //   props: {
  //     class: "w-full",
  //     options: [{ label: "无", value: "" }].concat(
  //       Object.entries(compMasks).map(([key, value]) => {
  //         return {
  //           label: value.name,
  //           value: key,
  //         };
  //       })
  //     ),
  //   },
  // },
  {
    label: "透明度",
    dataIndex: "layout.opacity",
    component: Slider,
    props: {
      defaultValue: 1,
      min: 0,
      max: 1,
      step: 0.01,
    },
  },
];

export const bgColumns: ColumnItem[] = [
  {
    label: "背景颜色",
    dataIndex: "layout.background.color",
    ...createColorOpts(),
  },
  // {
  //   label: "背景图片",
  //   dataIndex: "background.image",
  //   component: ImagePicker,
  // },
  // {
  //   label: "repeat",
  //   dataIndex: "background.repeat",
  //   component: "Select",
  //   props: {
  //     options: [
  //       "repeat",
  //       "no-repeat",
  //       "repeat-x",
  //       "repeat-y",
  //       "repeat-round",
  //       "repeat-space",
  //     ].map((v) => ({ label: v, value: v })),
  //   },
  // },
  // {
  //   label: "position",
  //   dataIndex: "background.position",
  //   component: "Select",
  //   props: {
  //     options: [
  //       "center",
  //       "top",
  //       "bottom",
  //       "left",
  //       "left-top",
  //       "left-bottom",
  //       "right",
  //       "right-top",
  //       "right-bottom",
  //     ].map((v) => ({ label: v, value: v })),
  //   },
  // },
  // {
  //   label: "size",
  //   dataIndex: "background.size",
  //   component: "Select",
  //   props: {
  //     options: ["auto", "cover", "contain"].map((v) => ({
  //       label: v,
  //       value: v,
  //     })),
  //   },
  // },
  // {
  //   label: "clipPath",
  //   dataIndex: "background.clipPath",
  //   component: "Input",
  // },
];

export function createAttrsForm(valueColumns: ColumnItem[]) {
  return defineComponent({
    props: {
      component: any<DesignComp>().isRequired,
    },
    setup(props) {
      const { store, actions } = useEditor();
      function changeVal(e: { dataIndex: string; value: any }) {
        actions.updateCompData(store.currComp, e.dataIndex, e.value);
        actions.submitUpdate();
      }

      return () => {
        const { component } = props;
        return (
          <div>
            {valueColumns.length ? (
              <>
                <div>属性</div>
                <FormUI
                  data={component}
                  columns={valueColumns}
                  onChange={changeVal}
                />
              </>
            ) : null}
            <div>布局</div>
            <FormUI
              data={component}
              columns={layoutColumns}
              onChange={changeVal}
            />
            {!isEmpty(component?.layout?.background) ? (
              <>
                <div>背景</div>
                <FormUI
                  data={component}
                  columns={bgColumns}
                  onChange={changeVal}
                />
              </>
            ) : null}
          </div>
        );
      };
    },
  });
}
