import { Input } from "ant-design-vue";
import { get } from "lodash";
import { defineComponent } from "vue";
import { any } from "vue-types";

export function createAttrsHoc(
  options: { label: string; dataIndex?: string }[]
) {
  return defineComponent({
    props: {
      value: any(),
    },
    emits: ["update:value"],
    setup(props, { emit }) {
      return () => (
        <div>
          {options.map((d) => {
            const val = d.dataIndex
              ? get(props.value, d.dataIndex)
              : props.value;
            return (
              <div>
                <div>{d.label}</div>
                <Input
                  value={val}
                  onChange={(e) => emit("update:value", e.target.value)}
                />
              </div>
            );
          })}
        </div>
      );
    },
  });
}