import { ExternalComponentModel } from './external-components.js'
import { DatasourceModel } from '../datasources.js'
import { SDKModel } from '../../core/model.js'
import { SDKCollection } from '../../core/collection.js'
import { FormModel } from './forms.js'
import { SDK } from '../../sdk.js'

export interface RenderingHost {
  url: string
  fallbackUrl: string
  availableComponents: Partial<ExternalComponentModel>[] // available in sitecore marketplace
  registeredComponents: Partial<ExternalComponentModel>[] // registered in the rendering host components
  allComponents: Partial<ExternalComponentModel>[] // combined marketplace + registered components
  expandedComponents: Partial<ExternalComponentModel>[] // expanded registered components eg. each form is a separate component in this collection
  forms: Partial<FormModel>[]
  registeredDatasources: Partial<DatasourceModel>[]
  pluginsHostConnectionStatus: 'loading' | 'success' | 'error'
  connectionStatus: 'loading' | 'success' | 'error'
}

export interface RenderingHostModel extends RenderingHost {}

export function getRenderingHostDefaults(sdk: SDK) {
  return {
    pluginsHostConnectionStatus: 'loading',
    connectionStatus: 'loading'
  }
}

export class RenderingHostModel extends SDKModel<RenderingHost> implements RenderingHost {
  allComponents: ReturnType<this['constructExternalComponents']>
  expandedComponents: ReturnType<this['constructExternalComponents']>
  availableComponents: ReturnType<this['constructExternalComponents']>
  registeredComponents: ReturnType<this['constructExternalComponents']>
  registeredDatasources: ReturnType<this['constructDatasources']>
  forms: ReturnType<this['constructForms']>

  getDefaults(sdk: SDK) {
    return getRenderingHostDefaults(sdk)
  }
  defineProperties() {
    super.defineProperties()
    this.sdk.utils.defineCollectionAccessor(
      this,
      'allComponents',
      this.constructExternalComponents(),
      {},
      this.getHiddenProps()
    )
    this.sdk.utils.defineCollectionAccessor(
      this,
      'expandedComponents',
      this.constructExternalComponents(),
      {},
      this.getHiddenProps()
    )
    this.sdk.utils.defineCollectionAccessor(
      this,
      'availableComponents',
      this.constructExternalComponents(),
      {},
      this.getHiddenProps()
    )
    this.sdk.utils.defineCollectionAccessor(
      this,
      'registeredComponents',
      this.constructExternalComponents(),
      {},
      this.getHiddenProps()
    )
    this.sdk.utils.defineCollectionAccessor(
      this,
      'registeredDatasources',
      this.constructDatasources(),
      {},
      this.getHiddenProps()
    )
    this.sdk.utils.defineCollectionAccessor(this, 'forms', this.constructForms(), {}, this.getHiddenProps())
  }
  constructExternalComponents() {
    return SDKCollection.construct(this.sdk.ExternalComponent, () => ({}))
  }
  constructDatasources() {
    return SDKCollection.construct(this.sdk.Datasource, () => ({}))
  }
  constructForms() {
    return SDKCollection.construct(this.sdk.Form, () => ({}))
  }

  // sc_horizon & sc_lang parameters are needed in order to avoid Experience Editor to
  getPreviewURL(fallback = false) {
    return this.url ? this.url + '?sc_horizon=editor&sc_lang=en' : null
  }

  getFallbackPreviewURL() {
    return this.fallbackUrl ? this.fallbackUrl + '/api/editing/feaas' : null
  }

  static getComponentsGroups(components: ExternalComponentModel[]) {
    console.log(components.map((c) => c.group))
    return [...new Set(components.map((c) => c.group))]
  }

  static getComponentsByGroup(components: ExternalComponentModel[], group: string) {
    return components.filter((c) => c.group === group)
  }

  fetchURL() {
    const tenantUrl = `https://xmc-${this.sdk.auth.tenant.name}.${this.sdk.sitecorePostfix}`
    // url
    this.set({ url: tenantUrl })

    const query = `
      query RetrieveContentItems($itemPath: String = "/sitecore/system/Settings/Services/Rendering Hosts") {
        rootItem: item(where: {path: $itemPath} )
        {
          children(includeTemplateIDs: "{BC71D442-3E4F-46BA-887C-746E54F9BB83}")
          {
          nodes{ name, fields(excludeStandardFields:true){ nodes{ name, value}}}
          }
        }
      }
    `
    // fallback url
    this.sdk
      .fetchJSON(`${tenantUrl}/sitecore/api/authoring/graphql/v1/`, {
        method: 'POST',
        body: JSON.stringify({ query })
      })
      .then((response) => {
        this.set({
          fallbackUrl: response.data.rootItem.children.nodes?.[0].fields.nodes.find(
            ({ name }: { name: string }) => name === 'ServerSideRenderingEngineApplicationUrl'
          ).value
        })
      })
  }
}