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

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

export function createModalVNode(content: RenderContent, props?: object & Omit<ModalConfig, 'content'>) {
  return Modal.open({
    content,
    titleAlign: 'start',
    closable: false,
    escToClose: false,
    maskClosable: false,
    okButtonProps: { size: 'small' },
    cancelButtonProps: { size: 'small' },
    ...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 createSelectVNode(value: Ref, options: AnyObject[], props?: AnyObject): VNode {
  return createVNode(Select, {
    options,
    'modelValue': value.value,
    'placeholder': '请选择',
    'onUpdate:modelValue': (val?: unknown) => set(value, 'value', val),
    ...props,
  });
}

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

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

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

export function createInputNumberVNode(value: Ref, props?: AnyObject): VNode {
  return createVNode(InputNumber, {
    'modelValue': value.value,
    'placeholder': '请输入',
    'onUpdate:modelValue': (val?: string) => set(value, 'value', val || 0),
    'min': 0,
    'max': 255,
    ...props,
  });
}

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

export function createTextareaVNode(value: Ref, props?: AnyObject) {
  return createVNode(Textarea, {
    'modelValue': value.value,
    'placeholder': '请输入',
    'onUpdate:modelValue': (val?: string) => set(value, 'value', val || 0),
    'max-length': 500,
    'show-word-limit': true,
    'auto-size': { minRows: 3, maxRows: 6 },
    ...props,
  });
}

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

export function createInputUploadVNode(value: Ref, props?: AnyObject): VNode {
  return createVNode(InputUpload, {
    'modelValue': value.value,
    'placeholder': '请选择',
    'onUpdate:modelValue': (val?: string) => set(value, 'value', val || 0),
    ...props,
  });
}

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