export function Lazy(hostProperty?: string) {
  return (proto, prop) => {
    if (!hostProperty && !proto["__lazyHost"]) {
      throw new Error("@Lazy() decorator requires either a @LazyHost(), or a `hostProperty` argument that matches the name of the `@Element()` property.");
    } else if (!hostProperty) {
      hostProperty = proto["__lazyHost"];
    }

    const { render } = proto;
      proto.render = function () {
        if ('IntersectionObserver' in window) {
          let io = new IntersectionObserver((data: any) => {
            if (data[0].isIntersecting) {
              this[prop].apply(this);
              io.disconnect();
              io = null;
            }
          });
          io.observe(this[hostProperty]);
        }
        else {
          // fall back to setTimeout for Safari and IE
          setTimeout(() => {
            this[prop].apply(this);
          }, 300);
        }

        return render.apply(this);
      };
  };
}