import DesignSystem from '../design-system';
import { ConnectorTemplate } from '.';
import Core from '..';
import { NodeTemplate } from '../dom';

export const RootPage = ( options:ConnectorTemplate<any> ) => {
  return Page( { ...options , name : '/' } );
}

type PageInitOptions = ConnectorTemplate<any> & { name:string };

export const Page = ( options:PageInitOptions ) => {

  let patern = DesignSystem().register( 'page' , {
    baseName : options.name,
    attr : {},
    childrens : [{ localName : 'slot' }],
    proto : {}
  })

  let connector = patern.connector()({...options , ...{ attr : { context : `${options.name}-page` } }});

  Core.pages.set({
    name:`/${options.name}`,
    component:connector,
  });

  return connector;

}

export const PageLink = ( props : { to : string , title : string } ):NodeTemplate<any> => {

  console.log({props});

  return {
    localName : 'p',
    childrens : [
      { localName : 'a' , proto : { textContent : props.title } }
    ],
    proto : {
      onmousedown : () => {
        window.location.hash = props.to;
      }
    }
  }
}

export const PageRouter = ( props? : { pages : NodeTemplate<any>[] } | {} ) => {
  if(props && 'pages' in props){
    let { pages } = props;
    return pages;
  }
  else return null; 
}