import { h } from "preact"
import { Page } from "../../../page";
import Notes, { IVault, BaseNote } from "../../../notes";
import Navigation from "../../../navigation";
import EntryComponent from "./Entry";
import EntryList from "./EntryList";

import "./vault.scss"


export interface VaultProps {
   state: { id: string };
   hidden: { entry: string, id: string, note: string };
}

export default class VaultPage extends Page<VaultProps, { entries: BaseNote[] }> {
   vault: Promise<IVault>
   constructor(props: VaultProps) {
      super(props);
      this.state = { entries: [] };
   }

   async componentWillMount() {
      this.vault = Notes.getVault(this.props.state.id, Notes.getVaultKey(this.props.state.id))
      this.vault.then(vlt => {
         window.debug.activeVault = vlt;
         window.debug.createNotes = (cnt = 10) => {
            for (let i = 0; i < cnt; i++) {
               let nt = vlt.newNote();
               nt.__value = `Random Note ${i}\ With some Content ${i}`;
               vlt.saveNote(nt);
            }
         }
      })
      this.vault.catch(err => {
         Navigation.setPage("/")
      });
   }

   render() {
      if (this.props.hidden && this.props.hidden.entry === "true") {
         return <EntryComponent vault={this.vault} id={this.props.hidden.id} note={this.props.hidden.note} />
      } else {
         return <EntryList vault={this.vault} />
      }
   }
}