import { observable, action, computed } from 'xmobx/mobx'
import { products } from '../PLP_template.fixtures'
// import { variantConfig } from '../fixture'
import { VariantConfigProps } from '../typings'
import { ProductPieceProps, ProductPieceStateProps } from './typings'

class ProductPieceState implements ProductPieceStateProps {
  @observable
  product = {}

  constructor(props: ProductPieceProps) {
    if (props.item) {
      this.product = props.item
    }
    if (props.variantConfig) {
      this.variantConfig = props.variantConfig
    }
  }

  @observable
  variantData: VariantConfigProps | object = {}

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

  @action.bound
  updateVariantData(value: number) {
    this.variantData = this.variantConfig[value]
    this.product.variant = this.variantData.variant
  }

  @action.bound
  swapImages(product: ProductProps) {
    const imageToShift = this.product.images.shift()
    this.product.images.push(imageToShift)
  }
}

export { ProductPieceState }