import { observable, autorun } from '@formily/reactive'
function testObservable1() {
    // 将一个对象变化可观察的，就是倾听它的set操作
    const obs = observable({
        aa: {
            bb: 123,
        },
        cc: {
            dd: 123,
        },
    })
    autorun(() => {
        // 首次的时候会触发，变化的时候也会触发
        // 总共触发2次
        console.log('normal1', obs.aa.bb)
    })

    //数据进行set操作的时候，就会触发
    obs.aa.bb = 44
    autorun(() => {
        // 当值相同的时候，不会重复触发
        // 这里只会触发1次
        console.log('normal2', obs.cc.dd)
    })

    obs.cc.dd = 123
}

function testObservable2() {
    const obs = observable({
        aa: {
            bb: 123,
        },
        cc: {
            dd: 123,
        },
        ee: {
            ff: 123,
        },
        gg: {
            hh: 123,
        },
    })

    autorun(() => {
        // 整个字段被赋值的话，就会触发// 所以，这里触发2次
        console.log('object1', obs.cc)
    })

    obs.cc = { dd: 456 }

    autorun(() => {
        // 这里会触发2次，虽然值相同// 但是object的比较是通过引用比较的
        console.log('object2', obs.ee)
    })

    obs.ee = { ff: 123 }

    autorun(() => {
        // 只是倾听aa字段的话，那么子字段的变化是不会触发的
        // 因为obs.aa的引用没有变化
        // 所以这里只触发1次
        console.log('object3', obs.aa)
    })

    console.log('testObservable2 set data')
    obs.aa.bb = 44
    autorun(() => {
        // 主体变化的时候，子的也要变化
        // 所以这里触发2次
        console.log('object4', obs.gg.hh)
    })

    console.log('testObservable2 set data2')
    obs.gg = { hh: 45 }
}

function testObservable3() {
    const obs = observable({
        aa: {
            bb: ['a'],
        },
    })
    autorun(() => {
        // 只倾听bb字段的话，变化的时候也不会触发
        // 因为obs.aa.bb的引用没变化
        console.log('array1', obs.aa.bb)
    })

    autorun(() => {
        // length字段会autorun的时候触发
        // 因为obs.aa.bb的length字段发生变化了
        console.log('array2', obs.aa.bb.length)
    })

    autorun(() => {
        // 即使原来的不存在，也能触发
        // 这里会触发2次，因为的确obs.aa.bb[1]的值变了
        console.log('array3', obs.aa.bb[1])
    })

    console.log('testObservable3 set data')
    obs.aa.bb.push('cc')
}

function testObservable4() {
    const obs = observable({
        aa: {
            bb: ['a'],
        },
        cc: '78',
    })
    autorun(() => {
        // 倾听其他字段的话当然也不会触发
        console.log('other', obs.cc)
    })

    console.log('testObservable4 set data')
    obs.aa.bb.push('cc')
}

function testObservableShadow() {
    const obs = observable.shallow({
        aa: {
            bb: 'a',
        },
        cc: {
            dd: 'a',
        },
    })

    autorun(() => {
        // 这里只会触发1次，因为是浅倾听set操作
        console.log('shadow1', obs.aa.bb)
    })

    console.log('testObservableShadow set data1')
    obs.aa.bb = '123'autorun(() => {
        // 这里会触发2次，aa属于浅倾听的范围
        console.log('shadow2', obs.cc)
    })

    console.log('testObservableShadow set data2')
    obs.cc = { dd: 'c' }
}
export default function testObservable() {
    testObservable1()
    testObservable2()
    testObservable3()
    testObservable4()
    testObservableShadow()
}

import { observable, autorun } from '@formily/reactive'
function testObservable1_object() {
    const obs = observable({
        aa: {
            bb: 123,
        },
    })
    autorun(() => {
        // 触发2次
        // 首次
        // 自身赋值1次
        console.log('normal1_object', obs.aa)
    })

    // 不会触发，子字段的变化不会影响到父字段的触发
    console.log('1. sub assign')
    obs.aa.bb = 44
    // 会触发
    console.log('2. self assign')
    obs.aa = { bb: 789 }
}

function testObservable2_object() {
    const obs = observable({
        aa: {
            bb: 123,
        },
    })
    autorun(() => {
        // 触发2次
        // 首次
        // 自身赋值1次
        // 赋值如同console，一样是向对象执行get操作
        const mk = obs.aa
        console.log('normal2_object')
    })

    // 不会触发，子字段的变化不会影响到父字段的触发
    console.log('1. sub assign')
    obs.aa.bb = 44
    // 会触发1次
    console.log('2. self assign')
    obs.aa = { bb: 789 }
}

function testObservable3_object() {
    const obs = observable({
        aa: {},
    })
    autorun(() => {
        // 触发1次// 首次
        const mk = obs.aa
        console.log('normal3_object')
    })

    // 不会触发，object的添加property不会触发
    console.log('1. self add property')
    obs.aa.bb = 4
    // 不会触发，obs.aa.bb的赋值不会触发
    console.log('2. self assign')
    obs.aa.bb = 5
    // 不会触发，object的移除property不会触发
    console.log('3. self remove property')
    delete obs.aa.bb
}

function testObservable4_object() {
    const obs = observable({
        aa: {},
    }) as any
    autorun(() => {
        // 触发3次
        // 首次
        // addProperty时
        // removeProperty时
        for (const i in obs.aa) {
            console.log('nothing')
        }
        console.log('normal4_object')
    })

    // 会触发，object的添加property会触发，对象是遍历时
    console.log('1. self add property')
    obs.aa.bb = 4
    // 不会触发，obs.aa.bb的赋值不会触发
    console.log('2. self assign')
    obs.aa.bb = 5
    // 会触发，object的移除property不会触发
    console.log('3. self remove property')
    delete obs.aa.bb
}

function testObservable1_array() {
    const obs = observable({
        aa: [] as number[],
    })
    autorun(() => {
        // 一共触发了1次
        // 首次
        const mk = obs.aa
        console.log('normal1_array')
    })

    // 不会触发，相当于object的添加property而已
    console.log('1.push')
    obs.aa.push(1)

    // 不会触发
    console.log('2.assign')
    obs.aa[0] = 3
    // 不会触发
    console.log('3.push')
    obs.aa.push(4)

    // 不会触发，相当于object的移除property而已
    console.log('4.pop')
    obs.aa.pop()

    // 不会触发
    console.log('5.assign')
    obs.aa[0] = 5
}

function testObservable2_array() {
    const obs = observable({
        aa: [] as number[],
    })
    autorun(() => {
        // 一共触发了5次
        // 首次，
        // push 的2次
        // pop的2次，pop一次，触发2次
        console.log('normal2_array', obs.aa.length)
    })

    // 会触发，因为push影响到了length字段
    console.log('1.push')
    obs.aa.push(1)

    // 不会触发，因为对某个元素赋值不影响length字段
    console.log('2.assign')
    obs.aa[0] = 3
    // 会触发，因为push影响到了length字段
    console.log('3.push')
    obs.aa.push(4)

    // 会触发，因为pop影响到了length字段，这个会触发2次，不知道为什么
    console.log('4.pop')
    obs.aa.pop()

    // 不会触发，因为对某个元素赋值不影响length字段
    console.log('5.assign')
    obs.aa[0] = 5
}

function testObservable3_array() {
    const obs = observable({
        aa: [] as any[],
    })
    autorun(() => {
        // 一共触发了6次
        // 首次，
        // push 的2次
        // pop的1次
        // 赋值的2次
        obs.aa.map((item) => '')
        console.log('normal3_array')
    })

    // 会触发，因为影响到了map
    console.log('1.push')
    obs.aa.push(1)

    // 会触发，因为影响到了map
    console.log('2.assign')
    obs.aa[0] = 3
    // 会触发，因为影响到了map
    console.log('3.push')
    obs.aa.push({})

    // 不会触发，嵌套元素赋值
    console.log('4.inner assign')
    obs.aa[1].kk = 3
    // 会触发，因为影响到了map
    console.log('5.pop')
    obs.aa.pop()

    // 会触发，因为影响到了map
    console.log('6.assign')
    obs.aa[0] = 5
}

export default function testObservableCaseTwo() {
    testObservable1_object()
    testObservable2_object()
    testObservable3_object()
    testObservable4_object()
    testObservable1_array()
    testObservable2_array()
    testObservable3_array()
}

import { autorun, observable } from '@formily/reactive'
export default function testRef() {
    // ref就是为了弥补基础类型无法倾听set与get的问题// ref将基础类型包装一个object，{value:xxx}里面
    const ref = observable.ref(1)

    autorun(() => {
        console.log(ref.value)
    })

    ref.value = 123
}

import { autorun, observable } from '@formily/reactive'
export default function testRef() {
    // box类型与ref类型类似// 不过它将基础类型包装为get()与set()方法而已
    const box = observable.box(1)

    autorun(() => {
        console.log(box.get())
    })

    box.set(123)
}

import { autorun, observable } from "@formily/reactive"
//autorun是收集get依赖，然后重新运行，它总是马上执行一次
function testAutoRun1(){
    const obs = observable({
        aa:78
    })

    //autorun会执行两次
    //第一次是输出结果，并收集对字段进行get操作的依赖
    //第二次是当数据变化时，被set操作收集到，然后找出get操作的autorun方法，重新执行一遍，也会重新计算依赖
    const stop = autorun(() => {
        console.log(obs.aa)
    })

    obs.aa = 123
    //执行autorun的返回函数 则对应的autorun不会再继续监听值变化
    stop();

    //不会触发autorun
    obs.aa = 789
}

function testAutoRun2(){
    const obs = observable({
        aa:1,
        bb:3
    })

    //算上首次触发，一共是3次触发，而不是4次触发
    autorun(()=>{
        if( obs.aa == 1 || obs.bb == 2){
            console.log('true');
        }else{
            console.log("false");
        }
    })

    //这一句不会触发
    //因为收集get操作的时候，只判断到了obs.aa==1就已经提前终止了
    //所以autorun的第一次收集，只记录了obs.aa的数据
    obs.bb = 4//这一句触发了autorun，因为判断不满足，所以会触发obs.bb的数据记录
    obs.aa = 2//这一句也触发autorun
    obs.bb = 2
}

export default function testAutoRun(){
    testAutoRun1()
    testAutoRun2()
}

import { autorun, observable } from '@formily/reactive'
// computed与autorun是类似的，
// 它们都是收集get依赖，然后重新运行，它总是马上执行一次，
// 唯一不同的是computed是有一个返回值，返回值是一个ref对象，这个ref对象是observable的
export default function testComputed() {
    const obs = observable({
        aa: 11,
        bb: 22,
    })

    // 返回的数据用ref包装
    const computed = observable.computed(() => obs.aa + obs.bb)

    autorun(() => {
        console.log(computed.value)
    })

    obs.aa = 33
}

import { observable, reaction, autorun } from '@formily/reactive'
// 语法糖，reaction其实就是computed与autorun的混合
function testReaction1() {
    const obs = observable({
        aa: 1,
        bb: 2,
    })

    // 触发两次，初始化1次，更新后1次
    const dispose = reaction(() => obs.aa + obs.bb, console.log)

    obs.aa = 4
    dispose()
}

function testReaction2() {
    const obs = observable({
        aa: 1,
        bb: 2,
    })

    const computeValue = observable.computed(() => obs.aa + obs.bb)

    // 触发两次，初始化1次，更新后1次
    const dispose = autorun(() => {
        console.log(computeValue.value)
    })

    obs.aa = 4
    dispose()
}
export default function testReaction() {
    testReaction1()
    testReaction2()
}

import { observable, Tracker } from '@formily/reactive'
// Tracker是一个更为底层的方法
// 首次触发需要手动调用track，与函数，来执行
// 当数据变化后，回调自己，开发者可以在回调继续注册Tracker，也可以放弃注册
export default function testTracker() {
    const obs = observable({
        aa: 11,
    })

    const view = () => {
        console.log('view go!!!')
        console.log(obs.aa)
    }

    const tracker = new Tracker(() => {
        // 收到数据变化的通知
        console.log('tracker other')

        // 再次执行view，并收集依赖
        tracker.track(view)
    })

    // 首次执行view，并收集依赖
    console.log('tracker first')
    tracker.track(view)

    obs.aa = 22

    tracker.dispose()
}

import { observable, observe } from '@formily/reactive'
// observe仅在首次显式收集get依赖，而后每次发生变化，都通知一下，节点变化的情况
// 它可以具体到某个对象的某个字段的触发
export default function testObserve() {
    const obs = observable({
        aa: 11,
        bb: [1],
    })

    // 触发3次
    // obs.aa更改1次，obs.bb进行push的2次
    const dispose = observe(obs, (change) => {
        console.log('observe1', change)
    })

    obs.aa = 22
    // 触发2次
    // obs进行push的2次
    const dispose2 = observe(obs.bb, (change) => {
        console.log('observe2', change)
    })

    obs.bb.push(1)
    obs.bb.push(2)

    dispose()
    dispose2()
}

import { observable, autorun, batch } from '@formily/reactive'
export default function testBatch() {
    // 空字段的时候也能倾听
    const obs = observable<any>({
        aa: 1,
    })

    // 触发2次，首次，以及修改1次
    autorun(() => {
        console.log(obs.aa, obs.bb)
    })

    // 设置了两次，但是只触发1次，这是batch，批量触发的特性
    batch(() => {
        obs.aa = 321
        obs.bb = 'dddd'
    })
}

import { batch, observable, autorun } from '@formily/reactive'
export default function testBatchScope() {
    const obs = observable<any>({})

    // 共4次触发
    // 首次，以及后续的4次修改
    autorun(() => {
        console.log(obs.aa, obs.bb, obs.cc, obs.dd)
    })

    // 这里触发3次
    batch(() => {
        // scope里面第1次
        batch.scope(() => {
            obs.aa = 123
        })

        // scope里面第2次
        batch.scope(() => {
            obs.cc = 'ccccc'
        })

        // 两句都在外面的batch，它们是第3次触发
        obs.bb = 321
        obs.dd = 'dddd'
    })
}

import { observable, action, autorun } from '@formily/reactive'
// action是一种语法糖，将方法包装为batch
export default function testAction() {
    const obs = observable({
        aa: 1,
        bb: 2,
    })

    // 这里触发2次
    // 首次1次
    // 被action包装的方法1次
    autorun(() => {
        console.log(obs.aa, obs.bb)
    })

    // 传入一个方法，返回一个包装的方法
    // 这个方法的内容里面就是batch的
    const method = action(() => {
        obs.aa = 123
        obs.bb = 321
    })

    method()
}

import { define, observable, autorun, action } from '@formily/reactive'
export default function testDefine() {
    class DomainModel {
        deep = { aa: 1 }

        shallow = {}

        // 因为基础类型被box引用了，代码会被变为box.set,box.get，但是这里ts感知不到
        box = 0
        // ref引用包装后，字段变为{value}类型，这里也是ts感知不到的
        ref = ''
        constructor() {
            // define对typescript的支持并不友好
            // 左边是字段或者方法名，右边是包装的方法
            define(this, {
                deep: observable,
                shallow: observable.shallow,
                box: observable.box,
                ref: observable.ref,
                computed: observable.computed,
                go: action,
            })
        }

        get computed() {
            return this.deep.aa + this.box.get()
        }

        go(aa, box) {
            this.deep.aa = aa
            this.box.set(box)
        }
    }

    const model = new DomainModel()

    autorun(() => {
        console.log(model.computed)
    })

    model.go(1, 2)
    model.go(1, 2) // 重复调用不会重复响应
    model.go(3, 4)
}

import { model, autorun } from '@formily/reactive'
// model是一个更好的语法糖
export default function testModel() {
    const obs = model({
        // 普通属性自动声明 observable
        // 它不是针对某个字段包装为observable，而是以整个model为根，包装为observable，注意与define的不同
        aa: 1,
        bb: 2,

        // getter/setter 属性自动声明 computed
        get cc() {
            return this.aa + this.bb
        },

        // 函数自动声明 action，也就是被batch包围了
        update(aa: number, bb: number) {
            this.aa = aa
            this.bb = bb
        },
    })

    // 这段触发3次
    // 首次渲染
    // 第2次是单独赋值obs.aa
    // 第3次是执行被batch包围的update方法
    autorun(() => {
        console.log(obs.cc)
    })

    // 单独赋值
    obs.aa = 3// 调用了被batch包装的方法
    obs.update(4, 6)
}