"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const mobx_1 = require("xmobx/mobx");
// # example
// 1. observable
class EhState {
    constructor() {
        // isNotObserved = true
        this.isVisible = false;
    }
}
__decorate([
    mobx_1.observable
], EhState.prototype, "isVisible", void 0);
// 2. action
// const list = 
class EhStateWithAction {
    constructor() {
        this.isVisible = false;
    }
    toggle() {
        this.isVisible = !this.isVisible;
    }
}
__decorate([
    mobx_1.observable
], EhStateWithAction.prototype, "isVisible", void 0);
__decorate([
    mobx_1.action
], EhStateWithAction.prototype, "toggle", null);
// === lifecycle ===
class Uncommon extends react_1.default.Component {
    // error boundary is just this
    componentDidCatch() {
        // error
    }
    componentWillReceiveProps() {
        //
    }
    shouldComponentUpdate() {
        // do not need
        return false;
    }
    componentWillUpdate() {
        //
    }
    render() {
        return 'will, render, did';
    }
    componentDidUpdate() {
        //
    }
}
// how mobx works sudo code
const tracking = {
    [state.isVisible]: []
};
let currentlyListening = undefined;
const listeners = [];
const secretState = {
    get isVisible() {
        if (currentlyListening) {
            listeners.push(currentlyListening);
        }
        //
        return state.isVisible;
    },
    set isVisible(value) {
        // first it checks if it is the same value, so it doesn't nofiy extra
        const change = {
            key: 'isVisible',
            value: value,
            oldValue: this.$mobxSecret.value,
        };
        this.$mobxSecret.value = value;
        if (listeners.length) {
            listeners.forEach(listener => listener(change));
        }
    }
};
let SmartObserving = class SmartObserving extends react_1.default.Component {
    _render() {
        console.log(state.isVisible);
        return 'eh';
    }
    render() {
        currentlyListening = this;
        const rendered = this._render();
        currentlyListening = undefined;
        return rendered;
    }
};
SmartObserving = __decorate([
    mobx_react_1.observer
], SmartObserving);
// ===
const state = new EhStateWithAction();
// 3. observer
// ===
// - component
const react_1 = __importDefault(require("react"));
const mobx_react_1 = require("xmobx/mobx-react");
let Eh = class Eh extends react_1.default.Component {
};
Eh = __decorate([
    mobx_react_1.observer
], Eh);
// ===
// - observing as a fn
const mobx_2 = require("xmobx/mobx");
mobx_2.observe(state, () => {
    console.log('every time state changes');
});
mobx_2.observe(state, 'isVisible', () => {
    console.log('every time state.isVisible changes');
});
// only 1
const singleState = state;
const countState = mobx_1.observable({
    updateCount: 0,
    increment() {
        // void
    },
});
countState.increment = mobx_1.action(() => {
    countState.updateCount += 1;
});
// @observer
class EhObserverExample extends react_1.default.Component {
    componentDidMount() {
        const onInterval = () => {
            // turn on and off every second
            // like a kid who discovered a light switch for the first time
            state.toggle();
        };
        setInterval(onInterval, 1000);
        mobx_2.observe(state, () => {
            countState.increment();
            this.forceUpdate();
        });
    }
    render() {
        return react_1.default.createElement("span", null,
            "updated: ",
            countState.updateCount);
    }
}
class Lifecycle extends react_1.default.Component {
    componentDidMount() {
        // happens 1x after render in the browser
        // updates to things should happen here
        // after this, it will update 1x
    }
    componentWillUnmount() {
        // clean up when it's no longer used
        // example, when you go from 1 page to another, things unmount
        // always stop listening to things like click events here
    }
    render() {
        return 'known';
    }
    componentWillMount() {
        // this is used for server side rendering and rehydration
        // since it happens 1x on server & 1x in browser
    }
}
// ========= multi ===
function createMultiState() {
    const newState = new EhStateWithAction();
    return newState;
}
// now we can have 10, and they all have their own
// class MultiStateObserver extends React.Component {
//   // state = createMultiState()
//   constructor(...args) {
//     super(...args)
//     this.thingToObserve = new EhStateWithAction()
//   }
// }
class MultiStateObserver extends react_1.default.Component {
}
MultiStateObserver.defaultProps = {
    // @note - you can't have a getter on React.Prop
    //  so it will be called by react
    get state() {
        return new EhStateWithAction();
    },
};
// would never call the getter
// const eh = ''
// <MultiStateObserver state={eh} />
// would call the getter
// =>
// props = Object.freeze({
//   state: new EhStateWithAction()
// })
// === how defaultProps works ===
// @todo console.table console.group
function isUniq(value, index, arr) {
    console.assert(Array.isArray(arr), '3rd arg is the instance');
    const firstIndex = arr.indexOf(value);
    const isFirst = firstIndex === index;
    // console.table([
    //   ['value', value],
    //   ['isFirst', isFirst],
    //   ['firstIndex', firstIndex],
    // ])
    // console.log('\n\n\n')
    return isFirst;
}
// ['a', 2, 'a', 'b'].filter(isUniq)
// const list = ['a', 2, 'a']
// list.filter(isUniq)
function keys(obj) {
    const names = Object.getOwnPropertyNames(obj);
    const descriptors = Object.getOwnPropertyDescriptors(obj);
    const renamedDescriptors = Object.keys(descriptors);
    const symbols = Object.getOwnPropertySymbols(obj);
    const objKeys = Object.keys(obj);
    const list = [];
    // eslint-disable-next-line
    // tslint:disable forin
    for (const index in obj) {
        list.push(index);
    }
    return list
        .concat(objKeys)
        .concat(names)
        .concat(renamedDescriptors)
        .concat(symbols)
        .filter(isUniq);
}
function mergePropsAndDefaultProps(props, defaultProps) {
    // make a copy of props
    const frozenProps = Object.assign({}, props);
    keys(defaultProps).forEach(key => {
        // 1. if props that are passed in do not have this key
        // 2. calling hasOwnProperty WILL NOT TRIGGER A GETTER
        if (!Object.prototype.hasOwnProperty.call(props, key)) {
            console.debug('does have property: ', key);
            // THIS WILL TRIGGER ANY GETTERS
            frozenProps[key] = defaultProps[key];
        }
        else {
            console.debug('does not have property: ', key);
        }
    });
    Object.freeze(frozenProps);
    return frozenProps;
}
function example() {
    const props = {
        eh: true,
    };
    const defaultProps = {
        eh: false,
        moose: true,
        [Symbol.toPrimitive](type) {
            console.debug('(default)Props.toPrimitive');
            if (type === 'number') {
                return -42;
            }
            else {
                // also has options of type = 'string' | 'number' | 'default' | undefined
                return 'eh';
            }
        },
        get canada() {
            console.info('accessing defaultProps.canada');
            return 'eh';
        },
    };
    const proto = {
        protoProp: 0x1,
    };
    Object.setPrototypeOf(defaultProps, proto);
    Object.defineProperty(defaultProps, 'hidden', {
        configurable: true,
        enumerable: false,
        value: 10,
    });
    return mergePropsAndDefaultProps(props, defaultProps);
}
example();
// <MultiStateObserver />
// class MultiStateObserver extends React.Component {
//   constructor(props) {
//     super(props)
//     console.assert(
//       Object.isExtensible(props) === false,
//       'props is frozen, cannot change'
//     )
//     if (props.state === undefined) {
//       this.state = new EhStateWithAction()
//     } else {
//       this.state = props.state
//     }
//   }
// }
//# sourceMappingURL=observable.js.map