export class StyleManager {

  public element: HTMLElement
  public styles: string[] = [
    'bottom',
    'height',
    'left',
    'marginBottom',
    'marginLeft',
    'marginRight',
    'marginTop',
    'maxHeight',
    'maxWidth',
    'minHeight',
    'minWidth',
    'paddingBottom',
    'paddingLeft',
    'paddingRight',
    'paddingTop',
    'position',
    'right',
    'top',
    'width',
  ]
  public vendorStyles: string[] = [
    'transform',
    'transformOrigin',
    'transformStyle',
  ]
  public vendorPrefixes: string[] = ['moz', 'ms', 'o', 'webkit']
  public transformations: string[] = [
    'matrix',
    'matrix3d',
    'perspective',
    'rotate',
    'rotate3d',
    'rotateX',
    'rotateY',
    'rotateZ',
    'scale',
    'scale3d',
    'scaleX',
    'scaleY',
    'scaleZ',
    'skew',
    'skewX',
    'skewY',
    'translate',
    'translate3d',
    'translateX',
    'translateY',
    'translateZ',
  ]
  public defaultSuffix: string = 'px'
  public suffixes: Array<object> = [
    {
      suffix: '',
      styles: [
        'matrix',
        'matrix3d',
        'perspective',
        'position',
        'scale',
        'scaleX',
        'scaleY',
        'scaleZ',
      ]
    },
    {
      suffix: ['%', '%', 'px'],
      styles: ['transformOrigin'],
    },
    {
      suffix: 'deg',
      styles: [
        'rotate',
        'rotateX',
        'rotateY',
        'rotateZ',
        'skew',
        'skewX',
        'skewY',
      ]
    },
    {
      suffix: [null, null, null, 'deg'],
      styles: ['rotate3d'],
    }
  ]

  public constructor(element: HTMLElement, properties?: object) {
    this.setElement(element)
    if (typeof properties !== 'undefined') {
      this.setProperties(properties)
    }
    this.reset()
    return this
  }

  public setElement(element: HTMLElement): StyleManager {
    this.element = element
    return this
  }

  public setProperties(properties: object): StyleManager {
    for (let key in properties) {
      this[key] = properties[key]
    }
    return this
  }

  public applyStyle(style: string, value: string): StyleManager {
    this.element.style[style] = value
    return this
  }

  public applyStyleWithVendorPrefixes(style: string, value: string): StyleManager {
    let capitalizedStyleName: string = (style.charAt(0).toUpperCase() + style.slice(1))
    for (let prefix of this.vendorPrefixes) {
      this.applyStyle(prefix + capitalizedStyleName, value)
    }
    this.applyStyle(style, value)
    return this
  }

  public valueToString(style: string, value: Array<number|string>|number|string, join): string {
    let result: string = ''
    let suffix: Array<null|string> | string = this.defaultSuffix
    // Match suffix (px, em, deg).
    for (let _suffix of this.suffixes) {
      if (_suffix['styles'].indexOf(style) !== -1) {
        suffix = _suffix['suffix']
      }
    }
    if (Array.isArray(value)) {
      let i: number = 0
      for (let _value in value) {
        result += _value.toString()
        if (Array.isArray(suffix)) {
          if (suffix[i] !== null) {
            result += suffix[i]
          }
        } else {
          result += suffix
        }
        if (i < value.length - 1) {
          result += join
        }
        i++
      }
    } else {
      result += value.toString()
      if (Array.isArray(suffix)) {
        if (suffix[0] !== null) {
          result += suffix[0]
        }
      } else {
        result += suffix
      }
    }
    return result
  }

  public applyStyles(): StyleManager {
    for (let style in this.styles) {
      if (this[style] !== null) {
        let value: string = this.valueToString(style, this[style], ' ')
        this.applyStyle(style, value)
      }
    }
    return this
  }

  public applyTransformations(): StyleManager {
    let transformValues: string = ''
    for (let transform of this.transformations) {
      if (this[transform] !== null) {
        let stringValue = this.valueToString(transform, this[transform], ', ')
        transformValues += transform + `(${stringValue}) `
      }
    }
    this.applyStyleWithVendorPrefixes('transform', transformValues)
    return this
  }

  public applyVendorStyles(): StyleManager {
    for (let style in this.vendorStyles) {
      if (this[style] !== null) {
        let value: string = this.valueToString(style, this[style], ' ')
        this.applyStyleWithVendorPrefixes(style, value)
      }
    }
    return this
  }

  public apply(): StyleManager {
    this.applyStyles()
    this.applyTransformations()
    this.applyVendorStyles()
    return this
  }

  public reset(): StyleManager {
    for (let style of this.styles) {
      this[style] = null
    }
    for (let style of this.transformations) {
      this[style] = null
    }
    for (let style of this.vendorStyles) {
      this[style] = null
    }
    return this
  }

}