import React, {useEffect, useState} from 'react';
import { skipWhile } from 'rxjs/operators';
//
const RenderView = (props) => {
  
  const activeView = props.activeViewSet && props.activeViewSet.views && props.activeViewSet.views[props.viewId];
  console.log({data: props.data, activeView});
 
  const Component = activeView ? activeView.template : null;
  return ( activeView )? <Component {...props} dataBinding={activeView.dataBinding} /> : null;
};



export const ViewSetTemplate = (props) => {
  const [data, setData] = useState([]);
   useEffect(() => {
     let sub;
     if (props.activeViewSet && props.activeViewSet.dataSource) {
       sub = props.activeViewSet.dataSource()
       .pipe(skipWhile(x => !x))
      .subscribe(setData);
     }
     return () => {
      if(sub) sub.unsubscribe();
     };
   }, []);
  return (
    <>
      {props.activeViewSet && <RenderView {...props} activeViewSet={props.activeViewSet} viewId={'default'} data={data}/>}
    </>
  );
};