import { isObj } from 'exotic'

import { observable, action, computed } from 'xmobx/mobx'
import { oneStorage } from '@skava/persistence'
import { products } from './PLP_template.fixtures'
import { filterList } from './fixture'
import { reArrangeProducts } from './deps'
import { DraggableStateProps, ProductProps } from './typings'

export class DraggableState implements DraggableStateProps {
  @observable
  collisionProductId = 'none'

  @observable
  originalProducts: Array<ProductProps> = products

  @observable
  reArrangedProducts: Array<ProductProps> = []

  @observable
  isDragging = false

  @observable
  isActive = false

  @action.bound
  setItem(key: string, value: unknown) {
    this[key] = value
  }

  @computed
  get products() {
    if (this.reArrangedProducts.length) {
      return this.reArrangedProducts
    }
    return this.originalProducts
  }
  @computed
  get filterList() {
    if (this.reArrangedProducts.length) {
      return this.reArrangedProducts
    }
    return filterList
  }

  @action.bound
  onDragOver(value: string) {
    this.setItem('collisionProductId', value)
  }

  @action.bound
  onDragEnd(currentDragId: string, isFilter?: boolean) {
    const clonedProductList = isFilter
      ? reArrangeProducts(
          this.collisionProductId,
          currentDragId,
          this.filterList
        )
      : reArrangeProducts(this.collisionProductId, currentDragId, this.products)
    this.setItem('collisionProductId', 'none')
    this.setItem('reArrangedProducts', clonedProductList)
  }

  @action
  setDeletedProducts = (item: ProductProps) => {
    const removedProductsList: Array<string> = oneStorage.has('removedProducts')
      ? oneStorage.get('removedProducts')
      : []
    removedProductsList.push(item.id)
    oneStorage.set('removedProducts', removedProductsList)
  }
  @action.bound
  deleteProduct(index: number) {
    const clonedProductList = this.products
    const removedProduct = clonedProductList.splice(index, 1)
    this.setDeletedProducts(removedProduct[0])
    this.setItem('reArrangedProducts', clonedProductList)
  }
  @action
  replaceProductData = (index: number, product: ProductProps) => {
    this.products.splice(index, 1, product)
    this.setItem('reArrangedProducts', this.products)
  }
  @action
  setUpdatedProductsList = (product: ProductProps) => {
    const modifiedAttributes: ProductProps = {
      id: product.id,
      variant: product.variant,
      images: product.images,
    }
    let modifiedProducts = new Map([])
    let modifiedProductsList = []
    if (oneStorage.has('modifiedProducts')) {
      const clonedList = oneStorage.get('modifiedProducts')
      clonedList.forEach(value => {
        modifiedProducts.set(value.id, value)
      })
    }
    modifiedProducts.set(modifiedAttributes.id, modifiedAttributes)
    modifiedProducts.forEach((value, key) => {
      modifiedProductsList.push(value)
    })
    oneStorage.set('modifiedProducts', modifiedProductsList)
  }

  @action.bound
  updateProducts(updateParams) {
    const { product, shouldRemove } = updateParams
    this.products.forEach((item, index: number) => {
      if (item.id === product.id) {
        if (shouldRemove) {
          this.deleteProduct(index)
          return
        } else {
          this.replaceProductData(index, product)
          this.setUpdatedProductsList(product)
          return
        }
      }
    })
  }
}