import { get } from 'lodash'
import { action, computed, makeObservable, observable } from 'mobx';

import { ElementData } from '../../interfaces/element.interface'
import { DatabaseFeature, HighlightMode } from '../../interfaces/gis.interface'
import { MainStore } from '../../stores/mainStore'
import { Element } from '../element'

export class GisFeature {
  store: MainStore

  isLoading = false

  data: DatabaseFeature

  mode: HighlightMode | null = null

  elementContext?: Element = undefined

  loadedAt: Date
  source: string

  constructor(store: MainStore, feature: DatabaseFeature, source = 'backend') {
    makeObservable(this, {
      isLoading: observable,
      data: observable,
      mode: observable,
      elementContext: observable,
      setElementContext: action,
      setMode: action,
      pointTemplate: computed,
      element: computed,
      identifierHash: computed,
      layerName: computed,
      style: computed,
      minZoomLevel: computed,
      identifier: computed,
      name: computed,
    })

    this.data = feature
    this.store = store

    this.loadedAt = new Date()
    this.source = source
  }

  setElementContext(element?: Element) {
    this.elementContext = element
  }

  clearElementContext() {
    this.elementContext = undefined
  }

  setMode(mode: HighlightMode) {
    this.mode = mode
  }

  get pointTemplate(): string | null {
    return null
  }

  get element(): Element | undefined {
    if (!this.data.element) {
      return
    }

    const { elementHash: hash, type } = this.data.element

    if (this.store.elementStore.elements.has(hash)) {
      return this.store.elementStore.elements.get(hash)
    } else {
      return this.store.elementStore.instantiateElement(hash, {
        _type: type,
        organization: this.data.organization,
      } as ElementData)
    }
  }

  get identifierHash() {
    return this.data?.properties.identifierHash
  }

  get layerName() {
    return this.data?.layerName
  }

  get style() {
    return (this.constructor as typeof GisFeature).getFeatureStyle(
      this.data,
      this.mode,
      this.elementContext,
    )
  }

  get minZoomLevel() {
    const layerMetadata = this.store.userStore.organizationConfig.map
      ?.layerMetadata?.[this.layerName]

    return (
      layerMetadata?.minRenderZoom ||
      (this.constructor as typeof GisFeature).getMinZoomLevel(this.data)
    )
  }

  // Organization specific
  get identifier() {
    return get(this.data, (this.constructor as typeof GisFeature).getPrimaryKey(this.data))
  }

  get name() {
    return `${this.data.layerName}#${this.identifier}`
  }

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  static getPrimaryKey(_feature: DatabaseFeature) {
    return 'properties.identifierHash'
  }

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  static getMinZoomLevel(_feature: DatabaseFeature) {
    return
  }

  static getFeatureStyle(
    _feature: DatabaseFeature,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    _mode: HighlightMode = null,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    _elementContext?: Element,
  ) {
    return {
      color: '#FF4400',
    }
  }
}