mixin

// mixin
import Vue from 'vue'
import { Component } from 'vue-mixin-decorator'
import { settings } from '../..'
import {
  ColorData,
  ColorStyles,
  ColorConfig,
  DefaultColors,
} from './color.interface'

const defaultColors: DefaultColors = {
  white: '#fff',
  black: '#000',
  light: '#fafafa',
  dark: '#4f4f4f',
  primary: '#42a5f5',
  secondary: '#e3f2ff',
  tertiary: '#e3f2ff',
}

const colorValidator = x =>
  Object.keys({ ...settings.colors, ...defaultColors }).includes(x)

const Props = Vue.extend({
  props: {
    color: {
      type: String,
      validator: colorValidator,
    },
  },
})

@Component
export class ColorMixin extends Props {
  _color: ColorData = {
    hex: false,
    colors: defaultColors,
  }

  get colorStyles(): ColorStyles {
    if (this.color)
      return {
        color: this._color.colors[this.color],
      }
  }

  colorConfig(cfg: ColorConfig) {
    if (cfg.hex) this._color.hex = cfg.hex
    if (cfg.colors) {
      const cfgColors = cfg.colors
      Object.keys(cfgColors).forEach(k => {
        // this._color is undefined ?!
        this._color.colors[k] = cfgColors[k]
      })
    }
  }
}