import { KettalFunctionAction, KettalPopupAction, TableRow } from '@/types'
import { Ref, ref } from 'vue'

export interface actionType {
    name: string | undefined
    selection: 'single' | 'multiple' | 'none'
    rowKey?: string | string[] | undefined
    popupName?: string | undefined
    title: string
    functionName?: string | undefined,
    link?: string | undefined
    type: 'popup' | 'expand' | 'function' | '',
    actionSelectionRules?: ((row: TableRow) => boolean) | null
}

export default function useTableAction (rowKey: Ref<string | string[]>, selected: any, emit: any) {
  const hideBottom = ref(true) // Hide the bottom of the table on phone width
  const action = ref<actionType>({
    name: '' /** Name of the active action */,
    selection: 'none',
    rowKey: typeof rowKey === 'string' ? rowKey : 'rowId',
    type: '',
    popupName: '',
    title: '',
    functionName: '',
    link: '',
    actionSelectionRules: null
  })

  function activeAction (actionSelected: KettalPopupAction | KettalFunctionAction) {
    // action.value.rowKey = rowKey === 'string' ? rowKey : 'rowId'
    clearAction()
    if (actionSelected.selection === 'none') {
      if (actionSelected.type === 'function') {
        emit('callFunction', actionSelected.functionName)
      } else if (actionSelected.type === 'popup') {
        emit('openPopup', actionSelected.popupName)
      }
    } else if (actionSelected.selection === 'single' && selected.value.length === 1) {
      if (selected.value.length === 1) {
        if (actionSelected.type === 'function') {
          emit('callFunction', actionSelected.functionName
          )
        }
        if (actionSelected.type === 'popup') {
          emit('openPopup', actionSelected.popupName)
        }
      }
    } else {
      hideBottom.value = false
      if (actionSelected.type === 'popup') {
        action.value.popupName = actionSelected.popupName
      } else if (actionSelected.type === 'function') {
        action.value.functionName = actionSelected.functionName
      }
      action.value.selection = actionSelected.selection
      action.value.title = actionSelected.title
      action.value.type = actionSelected.type
      action.value.rowKey = actionSelected.rowKey ? actionSelected.rowKey : (typeof rowKey === 'string' ? rowKey : 'rowId')
      action.value.actionSelectionRules = actionSelected.actionSelectionRules ? actionSelected.actionSelectionRules : null
    }
  }

  /**
         * Function that clears the action
         *
         *
         * @public
         */
  function clearAction () {
    hideBottom.value = true
    action.value = {
      name: '' /** Name of the active action */,
      selection: 'none',
      rowKey: typeof rowKey === 'string' ? rowKey : 'rowId',
      type: '',
      popupName: '',
      title: '',
      functionName: '',
      link: '',
      actionSelectionRules: null
    }
  }

  /**
     *  On click confirm, depending on action type it activates the action
     *
     * @public
     */
  function confirmSelection () {
    if (action.value.type === 'function') {
      emit('callFunction', action.value.functionName
      )
    } else if (action.value.type === 'popup') {
      emit('openPopup', action.value.popupName
      )
    }
    action.value.selection = 'none'
    hideBottom.value = true
  }

  return { action, activeAction, clearAction, confirmSelection, hideBottom }
}