import { AnyObject } from '@/types/global';
import { createVNode, Ref, VNode } from 'vue';
import { CheckboxGroup, Form, FormItem, Input, InputNumber, Modal, Select, Textarea } from '@arco-design/web-vue';
import InputUpload from '@/components/input-upload/index.vue';
import ImageUpload from '@/components/image-upload/index.vue';

import { RenderContent } from '@arco-design/web-vue/es/_utils/types';
import { ModalConfig } from '@arco-design/web-vue/es/modal/interface';

export function createSelectVNode(value: Ref, options: AnyObject[], props?: AnyObject): VNode {
  return createVNode(Select, {
    options,
    'modelValue': value.value,
    'placeholder': '请选择',
    'onUpdate:modelValue': (val?: unknown) => {
      value.value = val;
    },
    ...props,
  });
}

export function createInputVNode(value: Ref, props?: AnyObject): VNode {
  return createVNode(Input, {
    'modelValue': value.value,
    'placeholder': '请输入',
    'onUpdate:modelValue': (val?: string) => {
      value.value = val || '';
    },
    ...props,
  });
}

export function createInputNumberVNode(value: Ref, props?: AnyObject): VNode {
  return createVNode(InputNumber, {
    'min': 0,
    'max': 200,
    'step': 1,
    'modelValue': value.value,
    'onUpdate:modelValue': (val?: number) => {
      value.value = val || 0;
    },
    ...props,
  });
}

export function createTextareaVNode(value: Ref, props?: AnyObject): VNode {
  return createVNode(Textarea, {
    'modelValue': value.value,
    'maxLength': 200,
    'showWordLimit': true,
    'autoSize': { minRows: 4, maxRows: 4 },
    'placeholder': '请选择',
    'onUpdate:modelValue': (val?: string) => {
      value.value = val;
    },
    ...props,
  });
}

export function createInputUploadVNode(value: Ref, props?: AnyObject) {
  return createVNode(InputUpload, {
    'modelValue': value.value,
    'onUpdate:modelValue': (val?: string) => {
      value.value = val;
    },
    ...props,
  });
}

export function createImageUploadVNode(value: Ref, props?: AnyObject) {
  return createVNode(ImageUpload, {
    'size': 100,
    'modelValue': value.value,
    'onUpdate:modelValue': (val?: string) => {
      value.value = val;
    },
    ...props,
  });
}

export function createCheckboxGroupVNode(value: unknown, options?: AnyObject[], props?: AnyObject) {
  return createVNode(CheckboxGroup, {
    'modelValue': value,
    'onUpdate:modelValue': (val?: string) => {
      value = val;
    },
    options,
    ...props,
  });
}

export function createFormVNode(props?: AnyObject, children?: VNode | VNode[] | undefined): VNode {
  return createVNode(Form, { autoLabelWidth: true, ...props }, () => children);
}

export function createFormItemVNode(props?: AnyObject, children?: string | VNode | VNode[]): VNode {
  return createVNode(FormItem, { showColon: true, ...props }, () => children);
}

export function createSelectionFormItemVNode(value: Ref, options: AnyObject[], itemProps?: AnyObject, props?: AnyObject): VNode {
  return createFormItemVNode(itemProps, createSelectVNode(value, options, props));
}

export function createImageFormItemVNode(value: Ref, itemProps?: AnyObject, props?: AnyObject): VNode {
  return createFormItemVNode(itemProps, createImageUploadVNode(value, props));
}

export function createInputFormItemVNode(value: Ref, itemProps?: AnyObject, props?: AnyObject): VNode {
  return createFormItemVNode(itemProps, createInputVNode(value, props));
}

export function createInputNumberFormItemVNode(value: Ref, itemProps?: AnyObject, props?: AnyObject): VNode {
  return createFormItemVNode(itemProps, createInputNumberVNode(value, props));
}

export function createTextareaFormItemVNode(value: Ref, itemProps?: AnyObject, props?: AnyObject) {
  return createFormItemVNode(itemProps, createTextareaVNode(value, props));
}

export function createInputUploadFormItemVNode(value: Ref, itemProps?: AnyObject, props?: AnyObject) {
  return createFormItemVNode(itemProps, createInputUploadVNode(value, props));
}

export function createCheckboxGroupFormItemVNode(value: Ref, options?: AnyObject[], itemProps?: AnyObject, props?: AnyObject) {
  return createFormItemVNode(itemProps, createCheckboxGroupVNode(value, options, props));
}

export function createModalVNode(content: RenderContent, props?: Omit<ModalConfig, 'content'> & { bodyStyle?: object }) {
  return Modal.open({ content, titleAlign: 'center', closable: false, escToClose: false, maskClosable: false, ...props });
}