import { type DefineComponent, type VNode } from "vue";
import type { Fm, FormProItemProps } from "./indexface";
import {
  NCascader,
  NCheckbox,
  NCheckboxGroup,
  NDatePicker,
  NInput,
  NInputNumber,
  NRadio,
  NRadioGroup,
  NSelect,
  NSpace,
  NTimePicker,
  NTreeSelect,
} from "naive-ui";

export default {
  custom: (modelValue, _, itemProps: FormProItemProps<any, "custom">) => {
    if (itemProps.customRender) {
      return itemProps.customRender(modelValue);
    } else {
      const Df = itemProps.defineComponent as DefineComponent<{
        modelValue: typeof modelValue;
      }>;
      return <Df modelValue={modelValue} />;
    }
  },
  input: (modelValue, field, itemProps: FormProItemProps<any, "input">) => {
    return (
      <NInput
        style={"width:100%"}
        v-model:value={modelValue[field]}
        {...itemProps.componentsProps}
        v-slots={{ ...itemProps.componentsSlots }}
      />
    );
  },
  inputNumber: (
    modelValue,
    field,
    itemProps: FormProItemProps<any, "inputNumber">
  ) => {
    return (
      <NInputNumber
        style={"width:100%"}
        v-model:value={modelValue[field]}
        {...itemProps.componentsProps}
        v-slots={{ ...itemProps.componentsSlots }}
      />
    );
  },
  radioGroup: (
    modelValue,
    field,
    itemProps: FormProItemProps<any, "radioGroup">
  ) => {
    return (
      <NRadioGroup
        style={"width:100%"}
        v-model:value={modelValue[field]}
        {...itemProps.componentsProps}
        v-slots={{
          default: () => (
            <NSpace>
              {(itemProps.options as SelectNodeVo<any>[])?.map((o) => {
                return (
                  <NRadio
                    key={o.value}
                    value={o.value}
                  >
                    {o.label}
                  </NRadio>
                );
              })}
            </NSpace>
          ),
          ...itemProps.componentsSlots,
        }}
      />
    );
  },
  checkboxGroup: (
    modelValue,
    field,
    itemProps: FormProItemProps<any, "checkboxGroup">
  ) => {
    return (
      <NCheckboxGroup
        style={"width:100%"}
        v-model:value={modelValue[field]}
        {...itemProps.componentsProps}
        v-slots={{
          default: () => (
            <NSpace>
              {(itemProps.options as SelectNodeVo<any>[])?.map((o) => {
                return (
                  <NCheckbox
                    key={o.value}
                    value={o.value}
                    label={o.label}
                  />
                );
              })}
            </NSpace>
          ),
          ...itemProps.componentsSlots,
        }}
      />
    );
  },
  select: (modelValue, field, itemProps: FormProItemProps<any, "select">) => {
    return (
      <NSelect
        style={"width:100%"}
        v-model:value={modelValue[field]}
        options={itemProps.options as any[]}
        labelField="label"
        valueField="value"
        childrenField="children"
        {...itemProps.componentsProps}
        v-slots={{ ...itemProps.componentsSlots }}
      />
    );
  },
  treeSelect: (
    modelValue,
    field,
    itemProps: FormProItemProps<any, "treeSelect">
  ) => {
    return (
      <NTreeSelect
        style={"width:100%"}
        v-model:value={modelValue[field]}
        options={itemProps.options as any[]}
        labelField="label"
        keyField="value"
        childrenField="children"
        {...itemProps.componentsProps}
        v-slots={{ ...itemProps.componentsSlots }}
      />
    );
  },
  cascader: (
    modelValue,
    field,
    itemProps: FormProItemProps<any, "cascader">
  ) => {
    return (
      <NCascader
        style={"width:100%"}
        v-model:value={modelValue[field]}
        options={itemProps.options as any[]}
        {...itemProps.componentsProps}
        v-slots={{ ...itemProps.componentsSlots }}
      />
    );
  },
  datePicker: (
    modelValue,
    field,
    itemProps: FormProItemProps<any, "datePicker">
  ) => {
    return (
      <NDatePicker
        style={"width:100%"}
        v-model:value={modelValue[field]}
        {...itemProps.componentsProps}
        v-slots={{ ...itemProps.componentsSlots }}
      />
    );
  },
  timePicker: (
    modelValue,
    field,
    itemProps: FormProItemProps<any, "timePicker">
  ) => {
    return (
      <NTimePicker
        style={"width:100%"}
        v-model:value={modelValue[field]}
        {...itemProps.componentsProps}
        v-slots={{ ...itemProps.componentsSlots }}
      />
    );
  },
} as Record<
  keyof Fm,
  (
    modelValue: { [k in string]: any },
    field: any,
    itemProps: FormProItemProps<any, any>
  ) => VNode
>;
