// eslint-disable-next-line no-unused

import { isEmpty } from 'lodash'
import { h } from 'vue'

import { getComponentProps } from '../../services/component_utils/component_utils'
import './with_subscription.scss'

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'

library.add(faCircleNotch)

const withSubscription =
  ({
    fetch, // function to fetch entries and return a promise
    select, // function to select data from store
    childPropName = 'content', // name of the prop to be passed into the wrapped component
    additionalPropNames = [], // additional prop name list of the wrapper component
  }) =>
  (WrappedComponent) => {
    const originalProps = Object.keys(getComponentProps(WrappedComponent))
    const props = originalProps
      .filter((v) => v !== childPropName)
      .concat(additionalPropNames)

    return {
      props: [
        ...props,
        'refresh', // boolean saying to force-fetch data whenever created
      ],
      data() {
        return {
          loading: false,
          error: false,
        }
      },
      computed: {
        fetchedData() {
          return select(this.$props, this.$store)
        },
      },
      created() {
        if (this.refresh || isEmpty(this.fetchedData)) {
          this.fetchData()
        }
      },
      methods: {
        fetchData() {
          if (!this.loading) {
            this.loading = true
            this.error = false
            fetch(this.$props, this.$store)
              .then(() => {
                this.loading = false
              })
              .catch(() => {
                this.error = true
                this.loading = false
              })
          }
        },
      },
      render() {
        if (!this.error && !this.loading) {
          const props = {
            ...this.$props,
            [childPropName]: this.fetchedData,
          }
          const children = this.$slots
          return (
            <div class="with-subscription">
              <WrappedComponent {...props}>{children}</WrappedComponent>
            </div>
          )
        } else {
          return (
            <div class="with-subscription-loading">
              {this.error ? (
                <a onClick={this.fetchData} class="alert error">
                  {this.$t('general.generic_error')}
                </a>
              ) : (
                <FAIcon spin icon="circle-notch" />
              )}
            </div>
          )
        }
      },
    }
  }

export default withSubscription
