import React from "react";
import { compose, mount, route, withView } from "navi";
import { NotFoundError } from "navi";
import { View } from "react-navi";
import axios from "axios";
import Home from "./pages/Home";
import Group from "./pages/Group";
import Resource from "./pages/Resource";
import Transition from "./pages/Transition";
import Layout from "./components/Layout";
import { toPermalink } from "./lib/helper";

const basePath = "/__json__/";

const prefix = {
  group: "g",
  resource: "r",
  transition: "t"
};

export async function fetchJSON(uuid) {
  const fullPath = `${basePath}${uuid}.json`;
  const { data } = await axios.get(fullPath);

  return data;
}

function getResource(ctx, req) {
  let selected;
  let selectedGroup;

  const permalink = toPermalink(req.originalUrl);

  ctx.groups.forEach(group => {
    group.resources.forEach(resource => {
      if (resource.permalink === permalink) {
        selected = resource;
        selectedGroup = group;
      }
    });
  });

  if (selected) {
    return [selected, selectedGroup];
  }

  ctx.resources.forEach(resource => {
    if (resource.permalink === permalink) {
      selected = resource;
    }
  });

  return [selected];
}

function routeHome(req, ctx) {
  return {
    title: ctx.title,
    view: <Home title={ctx.title} description={ctx.description} />
  };
}

async function routeGroup(req, ctx) {
  const permalink = toPermalink(req.originalUrl);
  const group = ctx.groups.find(group => {
    return group.permalink == permalink;
  });

  if (!group) {
    throw new NotFoundError();
  }

  return {
    title: `${group.title} - ${ctx.title}`,
    view: <Group group={group} />
  };
}

async function routeResource(req, ctx) {
  const [resource, group] = getResource(ctx, req);

  if (!resource) {
    throw new NotFoundError();
  }

  return {
    title: `${resource.title} - ${ctx.title}`,
    view: <Resource resource={resource} group={group} />
  };
}

async function routeTransition(req, ctx) {
  const permalink = toPermalink(req.originalUrl);
  const uuid = ctx.uuids[permalink];

  if (!uuid) {
    throw new NotFoundError();
  }

  const transition = await fetchJSON(uuid);

  return {
    title: `${transition.title} - ${ctx.title}`,
    view: <Transition config={ctx.config} transition={transition} />
  };
}

export default compose(
  withView((req, ctx) => {
    return (
      <Layout ctx={ctx}>
        <View />
      </Layout>
    );
  }),
  mount({
    [`/`]: route(routeHome),
    [`/${prefix.group}/:id`]: route(routeGroup),
    [`/${prefix.resource}/:id`]: route(routeResource),
    [`/${prefix.transition}/:id`]: route(routeTransition)
  })
);

@@ -145,24 +145,90 @@
 eact-navi%22;%0A
+import %7B findGroup, findResource %7D from %22snowboard-theme-helper%22;%0A
 import axios
@@ -242,16 +242,16 @@
 axios%22;%0A
-
 import H
@@ -773,46 +773,8 @@
 ) %7B%0A
-  let selected;%0A  let selectedGroup;%0A%0A
   co
@@ -823,102 +823,30 @@
 l);%0A
-%0A
   
-ctx.groups.forEach(group =%3E %7B%0A    group.resources.forEach(resource =%3E %7B%0A      if (r
+return findR
 esource
-.
+(
 perm
@@ -854,311 +854,36 @@
 link
- === permalink) %7B%0A        selected = resource;%0A        selectedGroup = group;%0A      %7D%0A    %7D);%0A  %7D);%0A%0A  if (selected) %7B%0A    return %5Bselected, selectedGroup%5D;%0A  %7D%0A%0A  ctx.resources.forEach(resource =%3E %7B%0A    if (resource.permalink === permalink) %7B%0A      selected = resource;%0A    %7D%0A  %7D);%0A%0A  return %5Bselected%5D
+, ctx.resources, ctx.groups)
 ;%0A%7D%0A
@@ -1130,52 +1130,18 @@
 p = 
-ctx.groups.find(group =%3E %7B%0A    return g
+findG
 roup
-.
+(
 perm
@@ -1149,26 +1149,20 @@
 link
- == permalink;%0A  %7D
+, ctx.groups
 );%0A%0A
@@ -1359,17 +1359,18 @@
   const 
-%5B
+%7B 
 resource
@@ -1376,17 +1376,18 @@
 e, group
-%5D
+ %7D
  = getRe

use finder from theme helper