const state = Hu.observable({
  count: 0
});

new Hu({
  el: '#app',
  render( html ){
    return html`
      <div @click=${ this.add }>Count is: ${ state.count }</div>
    `;
  },
  methods: {
    add(){
      state.count++
    }
  }
});

const app = document.getElementById('app');

// 一处定义, 处处使用
const result = Hu.html`
  <div>Hello world</div>
`;

// 在 Hu.render 中使用
Hu.render( result, app )

// 在 new Hu 创建的实例中使用
new Hu({
  el: app,
  render( html ){// html === Hu.html
    return result;
  }
});

// 在 Hu.define 创建的自定义元素中使用
Hu.define( 'custom-element', {
  render( html ){// html === Hu.html
    return result;
  }
});

const text = Hu.html.svg`<text y="50%" dy="30%">123</text>`;

Hu.render( div )`
  <svg>${ text }</svg>
`;

const app = document.getElementById('app');
let name = '张三';

// 正常使用
Hu.render(
  Hu.html`<div>${ name }</div>`,
  app
);

// 另一种使用方式
Hu.render( div )`
  <div>${ name }</div>
`;

  // 注册组件
  Hu.directive( 'my-directive', class {

    /**
     * 指令初始化时调用
     * @param {Element} element 指令所绑定的元素, 可以用来直接操作 DOM
     * @param {string} name 指令名, 不包括 `:` 前缀
     * @param {string[]} strings 有时同一个指令可能是允许使用多个插值绑定的, 该变量就包含了内容中除了插值绑定的部分
     *  - 例如: `:name=${ 'Hu.js' }` 是单个插值绑定的写法, 此时 `string` 将会是 `[ '', '' ]`
     *  - 例如: `:name="${ 'My' } name is ${ 'Hu' }.js"` 是多个插值绑定的写法, 此时 `string` 将会是 `[ '', ' name is ', '.js' ]`
     * @param {{}} modifiers 一个包含修饰符的对象
     *  - 例如: `:name` 中, 修饰符对象为: `{}`
     *  - 例如: `:name.foo.bar` 中, 修饰符对象为: `{ foo: true, bar: true }`
     */
    constructor( element, name, strings, modifiers ){

      /**
       * 在使用多个插值绑定的情况下
       * 就需要返回多个指令类去单独处理每个插值绑定的部分
       * 生成的多个指令类存储在 `parts` 实例属性中
       * 在实例化当前指令类时
       * 如果指令类拥有 `parts` 实例属性将返回 `parts` 内的所有指令类
       * 
       * 注意 !
       * 若当前指令是不允许使用多个插值绑定的, 那么 `this.parts` 是无须定义的, 并且应该抛出一个错误
       * 可以使用以下代码进行判断:
       * 
       *   if( !( strings.length === 2 && strings[0] === '' && strings[1] === '' ) ){
       *     throw new Error('当前指令的传值只允许包含单个表达式 !');
       *   }
       */
      this.parts = [];

    }

    /**
     * 指令被设置值时调用, 有以下情况
     *  1. 正常传值调用
     *  2. 传递指令方法的调用
     *     - 传递指令方法时, 需要将当前指令类传递给指令方法, 然后退出当前方法,
     *       指令方法会将用户的输入处理, 然后使用正常传值调用的方式再次调用当前方法
     * @param {any} value 用户传入值
     * @param {boolean} isDirectiveFn 用户传入值是否是指令方法
     */
    commit( value, isDirectiveFn ){
      if( isDirectiveFn ) return value( this );
    }

    /**
     * 当前指令被释放时调用
     */
    destroy(){

    }

  });

  // 返回已注册的指令
  Hu.directive( 'my-directive' );

  // 使用指令
  Hu.html`
    <div :my-directive=${ 123 }></div>
  `;

  // 这是方法的入口
  // 正在等待用户调用
  const fn = Hu.directiveFn(( value ) => {
    // 用户已经调用指令方法
    // 生成等待模板解析及指令的调用
    return part => {
      // 指令调用了当前指令方法
      // 处理值后, 将值返回给指令
      Hu.directive.commit( part, value );
    }
  });

  // 指令方法的调用
  Hu.html`
    <div class=${ fn( 123 ) }></div>
  `;

  // 也可以这样
  const fnResult = fn( 123 );

  Hu.html`
    <div class=${ fnResult }></div>
  `;

// 修改数据
hu.msg = 'Hello';
// DOM 还没有更新
Hu.nextTick(function(){
  // DOM 更新了
});

// 作为一个 Promise 使用
Hu.nextTick().then(function(){
  // DOM 更新了
});

const data = { a: 1 };

// 创建一个实例
const hu = new Hu({
  data
});

hu.a; // -> 1
hu.$data.a; // -> 1
hu.$data === data // -> false

Hu.define( 'custom-element', {
  // 定义自定义元素时, data 属性必须为一个函数
  data(){
    // this 将会是当前实例
    return {
      data: 1
    };
  },
  // 你也可以使用箭头表达式
  data: () => ({
    data: 1
  })
});

// 简单语法
Hu.define( 'custom-element', {
  props: [ 'size', 'myMessage' ]
});

// 对象语法
Hu.define( 'custom-element', {
  props: {
    // 类型转换
    size: Number,
    // 类型转换 + 默认值 + 来源属性
    myMessage: {
      type: String,
      default: '',
      attr: 'message'// 若不设置, 将会从 my-message 上进行取值
    }
  }
});

computed: {
  aDouble: hu => hu.a * 2
}

const hu = new Hu({
  data: {
    a: 1
  },
  computed: {
    // 仅读取
    aDouble(){
      return this.a * 2;
    },
    // 读取和设置
    aPlus: {
      get(){
        return this.a + 1
      },
      set( value ){
        this.a = value - 1;
      }
    }
  }
});

hu.aPlus;   // -> 2
hu.aPlus = 3;
hu.a;       // -> 2
hu.aPlus;   // -> 3
hu.aDouble; // -> 4

const hu = new Hu({
  data: {
    a: 1
  },
  methods:{
    plus(){
      this.a++
    }
  }
});

hu.a; // -> 2
hu.plus();
hu.a; // -> 3

Hu.define( 'custom-element', {
  data: () => ({
    a: 1
  }),
  globalMethods:{
    plus(){
      this.a++
    }
  }
});

const custom = document.body.appendChild( document.createElement('custom-element') );
const hu = custom.$hu;

hu.a; // -> 2
hu.plus();
hu.a; // -> 3
custom.plus();
hu.a; // -> 4

const hu = new Hu({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  methods: {
    watchB( value, oldValue ){
      // ...
    }
  },
  watch: {
    // 回调函数方式
    a( value, oldValue ){
      console.log(`value: ${ value }, oldValue: ${ oldValue }`);
    },
    // 方法名
    b: 'watchB'
    // 深度监听
    c: {
      deep: true,
      handler( value, oldValue ){
        // ...
      }
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      immediate: true,
      handler( value, oldValue ){
        // ...
      }
    },
    // 监听一系列方法
    e: [
      'watchB',
      function( value, oldValue ){
        // ...
      },
      {
        handler( value, oldValue ){
          // ...
        }
      }
    ],
    // 监听 hu.e.f 的值: { g: 5 }
    'e.f': function( value, oldValue ){
      // ...
    }
  }
});

hu.a = 2; // `value: 2, oldValue: 1`

// 正常使用
render( html ){
  return html`<div>Hello world</div>`;
}

// 条件判断
render( html ){
  if( something ){
    return html`<div>Truthy</div>`;
  }else{
    return html`<div>Falsey</div>`;
  }
}

const style = html`
  <style>
    :host > div{ color: red }
  </style>
`;

// 嵌套使用, 且支持多个根元素
render( html ){
  return html`
    ${ style }
    <div>Hi ~</div>
    <div>Hello world ~</div>
  `;
}

// 更多示例, 还在编辑中

const mixin = {
  created(){
    // 混入对象的生命周期回调会在实例自身的生命周期回调之前被调用
    console.log( 1 );
  }
};

const hu = new Hu({
  mixins: [ mixin ],
  created(){
    console.log( 2 );
  }
});
// => 1
// => 2

new Hu({
  customOption: 'foo',
  created(){
    console.log( this.$options.customOption ) // => 'foo'
  }
});

// 键路径
hu.$watch( 'a.b.c', function( newValue, oldValue ){
  // 做点什么
});

// 函数
hu.$watch(
  function(){
    // 表达式 `this.a + this.b` 每次得出一个不同的结果时
    // 处理函数都会被调用
    // 这就像监听一个未被定义的计算属性
    return this.a + this.b;
  },
  function( newValue, oldValue ){
    // 做点什么
  }
);

var unWatch = hu.$watch( 'a', callback );
// 取消观察
unWatch();

hu.$watch( 'someObject', callback, {
  deep: true
});

hu.someObject.nestedValue = 123;
// 回调会被触发

hu.$watch( 'a', callback, {
  immediate: true
});

hu.$on('test', function (msg) {
  console.log( msg )
});

hu.$emit( 'test', 'hi' );
// => "hi"

// 创建实例, 但是未挂载实例到文档中
const hu = new Hu({
  render( html ){
    return html`<div>Hello!</div>`;
  }
});

// 挂载到 #app
hu.$mount('#app');

new Hu({
  // ...
  methods: {
    doSomethingElse(){
      // ...
    },
    example(){
      // 修改数据
      this.message = 'changed';
      // DOM 还没有更新
      this.$nextTick(function{
        // DOM 现在更新了
        // `this` 绑定到当前实例
        this.doSomethingElse();
      });
    }
  }
});

Hu.define( 'custom-element', {
  // ...
});

// 自定义元素
const custom = document.createElement('custom-element');
// 自定义元素对应的 hu 实例
const hu = custom.$hu;

html`<div .title=${ 'value' }></div>`;

div.title; // => 'value'

// 保留 DOM 属性
html`<input ?readonly=${ true } />`;
input.hasAttribute('readonly'); // true;

// 移除 DOM 属性
html`<input ?readonly=${ false } />`;
input.hasAttribute('readonly'); // false;

function doSomething( event ){
  // ...
}

// 方法处理器
html`<button @click=${ doSomething }></button>`;

// 停止冒泡
html`<button @click.stop=${ doSomething }></button>`;

// 阻止默认行为
html`<button @click.prevent=${ doSomething }></button>`;

// 串联修饰符
html`<button @click.stop.prevent=${ doSomething }></button>`;

// 点击回调只会触发一次
html`<button @click.once=${ doSomething }></button>`;

// 系统修饰键
// 点击时, ctrl 是按下的
html`<button @click.ctrl=${ doSomething }></button>`;

// 精确控制系统修饰键
// 点击时, 四个系统修饰键内只有 ctrl 是按下的
html`<button @click.ctrl.exact=${ doSomething }></button>`;

html`<div :class=${{ active: isActive }}></div>`

var isActive = true;
var hasError = false;

html`
  <div
    class="static"
    :class=${{ active: isActive, 'text-danger': hasError }}
  ></div>
`

<div class="static active"></div>

const classes = {
  active: true,
  'text-danger': false
};

// 渲染的结果和上面一样
html`<div class="static" :class=${ classes }></div>`;

new Hu({
  data: {
    isActive: true,
    error: null
  },
  computed: {
    classes(){
      return {
        active: this.isActive && !this.error,
        'text-danger': this.error && this.error.type === 'fatal'
      };
    }
  },
  render( html ){
    return html`
      <div class="static" :class=${ this.classes }></div>
    `;
  }
});

var activeClass = 'active';
var errorClass = 'text-danger';

html`<div :class=${[ activeClass, errorClass ]}></div>`;

html`<div :class=${[ isActive ? activeClass : '', errorClass ]}></div>`;

html`<div :class=${[ { activeClass: isActive }, errorClass ]}></div>`;

var activeColor = 'red';
var fontSize = 30;

html`<div :style=${{ color: activeColor, fontSize: fontSize + 'px' }}></div>`

var styleObject = {
  color: 'red',
  fontSize: '13px'
};

html`<div :style=${ styleObject }></div>`

html`<div :style=${[ baseStyles, overridingStyles ]}></div>`

const div = document.createElement('div');
const hu = new Hu({
  el: div,
  data: {
    value: ''
  },
  render( html ){
    return html`
      <input ref="input" :model=${[ this, 'value' ]}>
    `;
  }
});

hu.value = '1';
hu.$nextTick(() => {
  hu.$ref.input.value;// -> '1'

  hu.value = '2';
  hu.$nextTick(() => {
    hu.$ref.input.value;// -> '2'
  });
});

const arr = [
  { id: '1', value: 'q' },
  { id: '2', value: 'w' },
  { id: '3', value: 'e' }
]

Hu.render( div )`
  <div>${
    Hu.html.repeat( arr, 'id', ( data, index, arr ) => {
      return Hu.html`<span>${ data.id }: ${ data.value }</span>`;
    })
  }</div>
`;

const unsafeHTML = `<span>unsafeHTML</span>`;

Hu.render( div )`
  <div>${
    Hu.html.unsafe( unsafeHTML )
  }</div>
`;

new Hu({
  data: {
    classes: 'bar'
  },
  render( html ){
    // 可复用
    const bindClasses = html.bind( this, 'classes' );

    // 1. 使用 bind 绑定的写法
    // 若 classes 发生改变, render 方法不会被重新运行, 而是单独更新绑定的位置
    return html`
      <div class=${ bindClasses }>${ bindClasses }</div>
    `;

    // 2. 使用常规绑定的写法
    // 若 classes 发生改变, render 方法会被重新运行以达到更新的目的
    return html`
      <div class=${ this.classes }>${ this.classes }</div>
    `;
  }
});