/* eslint-disable @typescript-eslint/camelcase */
import * as React from 'react'
import { Paywall } from '@ta-interaktiv/types'

declare global {
  interface Window {
    _dsc: any[]
  }
}
export interface Props {
  /** Whether to enable the paywall
   * functionality or not. Either set this manually or get the current paywall
   * state from the Newsnet API. */
  isEnabled: boolean

  /** @deprecated The ID of the DIV into which paywall elements should be placed into. */
  paywallContainerId?: string

  /**
   * The paywall configuration settings as provided by the Newsnet API. As this
   * information requires a request to the API, you have to wait to mount
   * this component until you have downloaded the required configuration from
   * the API. The component is not set up to handle a props change, as the
   * setup is done entirely in the constructor.
   */
  paywallConfiguration: Paywall
}

/**
 * These are the properties that need to be passed in for correct tracking
 * to occur. Some of these properties can be found in the Paywall object in
 * the Newsnet `external_services` API, but not all of them and some of them
 * under different names.
 */
export interface PaywallConfiguration {
  /** @deprecated The article ID */
  cms_id?: string

  /** @deprecated The URL of the content */
  content_id?: string

  /** Whether it's a normal article or premium */
  doc_type: string

  /** @deprecated The main category the article is filed in */
  channel?: string

  /** @deprecated The subcategory the article is filed in */
  sub_channel?: string

  /** @deprecated The title of the content */
  heading?: string

  /** @deprecated The tenant name / domain without the TLD */
  service_id?: string

  /** @deprecated Whether the visitor is on web, mobile or in the app */
  origin?: any
}

// endregion

/**
 * Enables paywall functionality on standalone projects.
 *
 */
class TamediaPaywall extends React.Component<Props> {
  public componentDidMount() {
    if (this.props.isEnabled) {
      // Check whether we are within the app – this is passed in via a search
      // parameter. If this is present, we forego any paywall logic
      const isInApp: boolean = new URL(window.location.href).searchParams.has(
        'appwebview'
      )
      if (isInApp) {
        console.debug('[Paywall] Is in app, not executing paywall component.')
        return
      }

      // Check whether we are in development mode
      if (
        process.env.NODE_ENV === 'development' ||
        navigator.userAgent === 'ReactSnap'
      ) {
        console.debug(
          '[Paywall] In Development mode, not executing paywall component.'
        )
        return
      }

      // Insert paywall overlay script into DOM
      const script = window.document.createElement('script')
      script.async = true
      script.src =
        'https://interaktiv.tagesanzeiger.ch/static/config/paywall.js'
      window.document.body.appendChild(script)


      // Initialize paywall overlay script
      const isPremium = this.props.paywallConfiguration.doc_type === 'premium'
      window._dsc = window._dsc || []
      window._dsc.push(['abo', isPremium])
    }
  }

  public render() {
    return null
  }
}

export { TamediaPaywall }