import '/model/Store';
import {lal} from '/posts/post.jsx';
import {s} from '/posts/store.jsx';
import {VideoCalculator} from '/posts/VideoCalculator.jsx';
import {Interactive} from '/posts/Interactive.jsx';
import { headers, Header, SubHeader } from "cmp/Blocks.jsx";
import { Collapse } from "cmp/Collapse/Collapse.jsx";


const {IF, ELSE} = Store;
export default function() {
  var krokotau = Store.Value.Boolean(false);
  let graph,
    dom = <div renderTo={document.body} class={[ "page-content", { krokotau } ]}>
      {_ => {
        setTimeout( function(){
          _( headers.map( i =>
            <div class={D.cls( 'link-header', {
              h1: i.type === 'Header',
              h2: i.type === 'SubHeader'
            } )}><a href={'#' + i.name}>{i.title}</a></div>
          ) )
        }, 10 );
      }}
      <Collapse label={'Хранение и передача видео'} value={false}>
        {VideoCalculator}
      </Collapse>
      <Collapse label={'Интерактив'} value={false}>
        <Interactive/>
      </Collapse>

    </div>;

  const w = window;

  let resizeFn;
  w.addEventListener('resize', Store.debounce(resizeFn = function() {
    tmpStore.set({
      isMobile: w.innerWidth < 1025,
      width: w.innerWidth
    });
  },1000/4));
  resizeFn();
  tmpStore.set('loaded', true);
};


