import React from "react";

import { Client, Tracking } from "sajari";

import {
  Filter,
  multiFacet,
  singleFacet,
  Pipeline
} from "sajari-react/controllers";
import { Debug, Input } from "sajari-react/ui/facets";
import Values from "sajari-react/controllers/values";
import { Response, Results, Summary, Paginator } from "sajari-react/ui/results";

const project = "sajariptyltd";
const collection = "sajari-com";
const pipelineName = "website";

const values = new Values();
const client = new Client(project, collection);

const tracking = new Tracking();
tracking.clickTokens("url");
const pipeline = new Pipeline(client, pipelineName, values, tracking);

const filter = Filter.ANDFilter();
values.set({ filter: () => filter.evaluate() });

const recencyFacet = new singleFacet(
  {
    last7: "firstseen<='RECENT_TIMESTAMP'",
    all: ""
  },
  "all"
);
filter.setFilter("recency", recencyFacet.filter());
recencyFacet.register(() => {
  filter.setFilter("recency", recencyFacet.filter());
  pipeline.search();
});

const categoryFacet = new multiFacet(
  {
    articles: "dir1='article'",
    blog: "dir1='blog'",
    faq: "dir1='faq'"
  },
  ["articles", "faq"]
);
filter.setFilter("category", categoryFacet.filter());
categoryFacet.register(() => {
  filter.setFilter("category", categoryFacet.filter());
  pipeline.search();
});

const App = () =>
  <div className="App">
    <div>
      <h3>Recency</h3>
      <div>
        <label>Last 7 Days</label>
        <Input.RadioFacet fb={recencyFacet} name="last7" />
      </div>
      <div>
        <label>All</label>
        <Input.RadioFacet fb={recencyFacet} name="all" />
      </div>
      <Debug.DebugFacet fb={recencyFacet} />
    </div>
    <div>
      <h3>Category</h3>
      <div>
        <label>Articles</label>
        <Input.CheckboxFacet fb={categoryFacet} name="articles" />
      </div>
      <div>
        <label>Blog</label>
        <Input.CheckboxFacet fb={categoryFacet} name="blog" />
      </div>
      <div>
        <label>Faq</label>
        <Input.CheckboxFacet fb={categoryFacet} name="faq" />
      </div>
      <Debug.DebugFacet fb={categoryFacet} />
    </div>
    <Response pipeline={pipeline}>
      <Summary values={values} />
      <Results />
      <Paginator values={values} pipeline={pipeline} />
    </Response>
  </div>;

export default App;

@@ -741,24 +741,196 @@
 uate() %7D);%0A%0A
+const currentUnix = parseInt(String(new Date().getTime() / 1000), 10);%0Aconst lastWeek = currentUnix - 7 * 24 * 60 * 60;%0Aconst lastMonth = currentUnix - 30 * 24 * 60 * 60;%0A%0A
 const recenc
@@ -970,17 +970,17 @@
  last7: 
-%22
+%60
 firstsee
@@ -984,29 +984,63 @@
 seen
-%3C='RECENT_TIMESTAMP'%22
+%3E'$%7BlastWeek%7D'%60,%0A    last30: %60firstseen%3E'$%7BlastMonth%7D'%60
 ,%0A  
@@ -1744,32 +1744,154 @@
 iv%3E%0A      %3Cdiv%3E%0A
+        %3Clabel%3ELast 30 Days%3C/label%3E%0A        %3CInput.RadioFacet fb=%7BrecencyFacet%7D name=%22last30%22 /%3E%0A      %3C/div%3E%0A      %3Cdiv%3E%0A
         %3Clabel%3EA

add recency facet values