import { deprecatedWarn } from '../../utils'

export const formatTittleItems = (items) => {
  if (!items || !items.length) return []

  deprecatedWarn('titleItems', '请用属性 [title] 或者 slot<title> 代替标题定义', false)
  return items
    .map(({ editer, ...rest }) => {
      if (editer !== 'text') return null
      return { ...rest }
    })
    .filter(Boolean)
}

export const BUILT_IN_ACTIONS = {
  search: { type: 'info', icon: 'el-icon-search', label: '查询' },
  add: { type: 'primary', icon: 'el-icon-plus', label: '新增' },
  down: { label: '下载', type: 'success', icon: 'el-icon-download' },
  del: { label: '删除', icon: 'el-icon-delete', type: 'danger' },
  draweradd: {},
  button: {},
}

export const BUILT_IN_ROW_ACTIONS = {
  del: { label: '删除', buttonProps: { icon: 'el-icon-delete', plain: true, type: 'danger' } },
  edit: { label: '编辑', buttonProps: { icon: 'el-icon-edit', plain: true, type: 'primary' } },
  detail: { label: '详情', buttonProps: { icon: 'el-icon-view', plain: true, type: 'primary' } },
}

const EDITOR_COMPONENT = {
  autocomplete: 'el-autocomplete',
  data: 'el-date-picker',
  date: 'el-date-picker',
  datePicker: 'el-date-picker',
  daterange: 'el-date-picker',
  input: 'el-input',
  textarea: 'el-input',
  select: 'dg-select',
  cascader: 'el-cascader',
}

const EDITOR_DEFAULT_PROPS = {
  'el-autocomplete': (item) => {
    const { aftSelect, ...rest } = item
    const props = {
      popperClass: 'dg-ac-select',
      clearable: true,
      placeholder: '请输入',
      fetchSuggestions: (queryString, cb) => cb([{ value: 'no', title: '无建议' }]),
      ...rest,
    }

    if (aftSelect) {
      props.on = props.on || {}
      props.on['select'] = aftSelect
    }

    return props
  },
  'el-date-picker'(item, alias = 'default') {
    const CUSTOM_EDITOR_PROPS = {
      data: { type: 'date' },
      date: { type: 'date' },
      datePicker: {
        type: 'date',
        format: 'yyyy-MM-dd',
        valueFormat: 'yyyy-MM-dd',
      },
      daterange: { type: 'daterange', rangeSeparator: '至', startPlaceholder: '开始日期', endPlaceholder: '结束日期' },
      default: {},
    }
    const { handleChange, ...rest } = item
    const props = {
      clearable: true,
      ...(CUSTOM_EDITOR_PROPS[alias] || {}),
      ...rest,
    }

    return props
  },
  'el-input'(item, alias = 'default') {
    const CUSTOM_EDITOR_PROPS = {
      default: {},
      textarea: { type: 'textarea' },
    }
    const { prependVal, appendVal, appendIcon, fn, ...rest } = item
    const props = {
      clearable: true,
      ...(CUSTOM_EDITOR_PROPS[alias] || {}),
      ...rest,
    }

    return props
  },
  'dg-select'(item) {
    const { handleChange, ...rest } = item
    const props = {
      clearable: true,
      on: {
        ...(handleChange || {}),
      },
      ...rest,
    }

    return props
  },
  'el-cascader'(item) {
    const { handleChange, props: _props = {}, ...rest } = item
    const props = {
      clearable: true,
      filterable: true,
      showAllLevels: false,
      props: {
        expandTrigger: 'hover',
        checkStrictly: true,
        emitPath: false,
        ..._props,
      },
      ...rest,
    }

    return props
  },
  'dg-text'() {
    return {}
  },
}

export const formatToolbarItems = (items) => {
  if (!items || !items.length) return {}

  deprecatedWarn('toolbarItems', 'queries/actions')

  const queries = []
  const actions = []
  const bottomActions = []
  let searchButtonProps = {}

  items.forEach((item) => {
    const { editer: editor, position, judge } = item
    if (typeof judge === 'function' && !judge()) return

    if (BUILT_IN_ACTIONS[editor]) {
      if (editor === 'search') {
        searchButtonProps = createBuiltInAction(BUILT_IN_ACTIONS[editor], editor)(item)
        searchButtonProps.visible = true
        return
      }

      if (position === 'bottom') {
        bottomActions.push(createBuiltInAction(BUILT_IN_ACTIONS[editor], editor)(item))
      } else {
        actions.push(createBuiltInAction(BUILT_IN_ACTIONS[editor], editor)(item))
      }
    } else {
      queries.push(createEditorProps(item))
    }
  })

  return {
    queries,
    actions,
    bottomActions,
    searchButtonProps,
  }
}

export const formatTableItems = (items) => {
  if (!items || !items.length) return

  deprecatedWarn('tableItems', 'columns')

  return items.map((item) => {
    const { title: label, field: prop, overFlow: showOverflowTooltip = true, actions, ...rest } = item
    const column = { ...rest, showOverflowTooltip, label, prop }
    if (actions) {
      column.showOverflowTooltip = false
      column.actions = actions.map((action) => formatAction(action))
    }

    return column
  })
}

function createBuiltInAction(options = {}, editor) {
  return (item) => {
    const { label, ...restOptions } = options
    const {
      tooltip,
      title = label,
      monitor,
      fn: handler,
      befFn: onBefore,
      aftFn: onAfter,
      editer,
      formItemStyle,
      fileName, // down 下载的参数
      ...buttonProps
    } = item
    const props = {
      monitor,
      buttonProps: {
        size: 'mini',
        ...restOptions,
        ...buttonProps,
      },
      handler,
      onBefore,
      onAfter,
      label: title,
      title: tooltip,
      builtIn: editor,
    }

    if (fileName) {
      props.fileName = fileName
    }

    return props
  }
}

export function createEditorProps(item) {
  if (item.editor) return item

  const { label, title: _label, prop, value: _prop, editer, formItemStyle, placeholder, ...rest } = item
  const editor = EDITOR_COMPONENT[editer] || 'dg-text'
  return {
    editor,
    label: label || _label || placeholder,
    prop: _prop || prop,
    formItemStyle,
    editorProps: { placeholder, ...EDITOR_DEFAULT_PROPS[editor](rest, editer) },
  }
}

export const formatAction = (
  { tooltip, title, render, renderPara, befFn: onBefore, aftFn: onAfter, fn: handler, judge, monitor, ...restAction },
  withExtra = true
) => {
  const action = withExtra
    ? { judge, render, renderPara, handler, onBefore, onAfter, buttonProps: restAction }
    : { buttonProps: restAction }

  if (tooltip) {
    action.tooltip = tooltip
  }

  if (title) {
    action.label = title
  }

  if (monitor) {
    action.monitor = monitor
  }

  if (typeof handler === 'string' && BUILT_IN_ROW_ACTIONS[handler]) {
    action.builtIn = handler
  }

  return action
}

export const mergeActionProps = (...objs) => {
  return objs.reduce((a, b) => {
    return { ...a, ...b, buttonProps: { ...a.buttonProps, ...b.buttonProps } }
  }, {})
}
