/**
 *
 * @authors yutent (yutent.io@gmail.com)
 * @date    2020-12-08 11:30:52
 * @version v1.0.0
 * 
 */


import $ from "../utils.js"
import "./checkbox-item.js"

export default class Checkbox extends HTMLElement  {
  
    
  static get observedAttributes() {
    return ["value"]
  }

  props = {
    value: []
  }
  

  constructor() {
    super();
    
    Object.defineProperty(this, 'root', {
      value: this.attachShadow({ mode: 'open' }),
      writable: true,
      enumerable: false,
      configurable: true
    })

    this.root.innerHTML = `<style>* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

::before,
::after {
  box-sizing: border-box; }

:host {
  --color-teal-1: #4db6ac;
  --color-teal-2: #26a69a;
  --color-teal-3: #009688;
  --color-green-1: #81c784;
  --color-green-2: #66bb6a;
  --color-green-3: #4caf50;
  --color-purple-1: #9575cd;
  --color-purple-2: #9575cd;
  --color-purple-3: #673ab7;
  --color-blue-1: #64b5f6;
  --color-blue-2: #42a5f5;
  --color-blue-3: #2196f3;
  --color-red-1: #ff5061;
  --color-red-2: #eb3b48;
  --color-red-3: #ce3742;
  --color-orange-1: #ffb618;
  --color-orange-2: #f39c12;
  --color-orange-3: #e67e22;
  --color-plain-1: #f2f5fc;
  --color-plain-2: #e8ebf4;
  --color-plain-3: #dae1e9;
  --color-grey-1: #bdbdbd;
  --color-grey-2: #9e9e9e;
  --color-grey-3: #757575;
  --color-dark-1: #62778d;
  --color-dark-2: #526273;
  --color-dark-3: #425064; }

:host {
  display: inline-flex; }
</style>
  <slot />
`
      
  }

  _updateChildrenStat() {
    Array.from(this.children).forEach(it => {
      if (it.tagName === 'WC-CHECKBOX-ITEM' && it.root) {
        if (this.value.includes(it.value)) {
          it.checked = true
        } else {
          it.checked = false
        }
      }
    })
  }

  get value() {
    return this.props.value
  }

  set value(val) {
    if (val === this.props.value) {
      return
    }
    this.props.value = val
    this._updateChildrenStat()
  }

  connectedCallback() {
    this._pickedFn = $.bind(this, 'child-picked', ev => {
      var tmp = [...this.props.value]
      var idx = tmp.indexOf(ev.detail.value)
      if (ev.detail.checked) {
        if (idx < 0) {
          tmp.push(ev.detail.value)
        }
      } else {
        if (~idx) {
          tmp.splice(idx, 1)
        }
      }
      this.props.value = tmp
      this.dispatchEvent(new CustomEvent('input'))
    })
  }

  disconnectedCallback() {
    $.unbind(this, 'child-picked', this._pickedFn)
  }

  attributeChangedCallback(name, old, val) {
if (val === null || old === val) {return}
    switch (name) {
      case 'value':
        if (val) {
          this.value = val.split(/,\s*?/)
        }
        break
    }
  }
}


if(!customElements.get('wc-checkbox')){
  customElements.define('wc-checkbox', Checkbox)
}