import React, { PropTypes } from "react"
import { Link } from "phenomic"
import enhanceCollection from "phenomic/lib/enhance-collection"

import urlToSlug from "../../utils/url-to-slug"
import Page from "../../layouts/Page"

import styles from "./index.css"

const Showcase = (props, context) => {
  const currentTag = props.params && props.params.showcaseTag || false

  let phenomicDocs
  const currentList = enhanceCollection(context.collection, {
    // filter: { showcaseTags: currentTags }
    filter: currentTag
      ? (item) => Boolean(
        item.showcaseTags && item.showcaseTags.indexOf(currentTag) > -1
      )
      : (item) => Boolean(item.showcaseTags),
    sort: (a, b) => (
      (!a.curated && b.curated) ||
      // more tags first
      (
        !a.curated &&
        !b.curated &&
        a.showcaseTags.length < b.showcaseTags.length
      ) ||
      // blog last
      a.showcaseTags.indexOf("blog") > -1
    ),
  })
  // place Phenomic itself at the end
  .filter((item) => {
    if (item.title !== "Phenomic docs") {
      return true
    }
    phenomicDocs = item
    return false
  })
  if (phenomicDocs) {
    currentList.push(phenomicDocs)
  }

  const addYourOwn = (
    <p className={ styles.addYourOwn }>
      <Link
        to={ "/showcase/submit/" }
        className={ styles.editPage }
      >
        {
          "Add your own website to this page!"
        }
      </Link>
    </p>
  )

  return (
    <div style={{ textAlign: "center" }}>
      <Page
        head={{
          title: "See who's using Phenomic",
        }}
        __filename={ "../layouts/Showcase/index.js" }
        __url={ "/showcase/" }
      >
        { addYourOwn }
        {
          currentTag &&
          <div>
            <span className={ styles.filterMessage }>
              { "You are currently viewing projects that match " }
              <em>{ currentTag }</em>
              { " tag. " }
              <Link
                to={ "/showcase/" }
                className={ styles.filterMessageLink }
              >
                { "View all." }
              </Link>
            </span>
          </div>
        }
        <ul
          className={ styles.list }
        >
          {
            currentList.map((item) => {
              return (
                <li
                  key={ item.title }
                  className={ styles.item }
                >
                  <a
                    className={ styles.itemLink }
                    href={ item.url }
                  >
                    { item.title }
                  </a>
                  <ul className={ styles.itemTags }>
                    {
                      item.showcaseTags &&
                      item.showcaseTags.map((tag) => (
                        <li
                          key={ tag }
                          className={ styles.itemTag }
                        >
                          <Link
                            to={ `/showcase/tag/${ tag }/` }
                            className={ styles.itemTagLink }
                          >
                            { tag }
                          </Link>
                        </li>
                      ))
                    }
                  </ul>
                  <br />
                  <a
                    href={ item.url }
                  >
                    <img
                      className={ styles.itemScreenshotLarge }
                      src={
                          "/assets/showcases/" +
                          urlToSlug(item.url) + "-large.jpg"
                      }
                    />
                    <img
                      className={ styles.itemScreenshotSmall }
                      src={
                          "/assets/showcases/" +
                          urlToSlug(item.url) + "-small.jpg"
                      }
                    />
                  </a>
                  <br />
                  {
                    item.source &&
                    <a
                      className={ styles.itemLinkSource }
                      href={ item.source }
                    >
                      { "(Source)" }
                    </a>
                  }
                </li>
              )
            })
          }
        </ul>
        { addYourOwn }
      </Page>
    </div>
  )
}

Showcase.propTypes = {
  params: PropTypes.object,
}

Showcase.contextTypes = {
  collection: PropTypes.array.isRequired,
}

export default Showcase

@@ -689,18 +689,20 @@
  =%3E 
-(
+%7B
 %0A      
+if 
 (
-!
 a.cu
@@ -710,16 +710,17 @@
 ated && 
+!
 b.curate
@@ -722,18 +722,44 @@
 urated) 
-%7C%7C
+%7B%0A        return -1%0A      %7D%0A
 %0A      /
@@ -786,62 +786,96 @@
     
-(%0A        !a.curated &&%0A        !b.curated &&%0A        
+if (a.showcaseTags.length %3C b.showcaseTags.length) %7B%0A        return 1%0A      %7D%0A      if (
 a.sh
@@ -884,33 +884,33 @@
 caseTags.length 
-%3C
+%3E
  b.showcaseTags.
@@ -919,19 +919,38 @@
 ngth
+) %7B
 %0A      
-) %7C%7C
+  return -1%0A      %7D%0A
 %0A   
@@ -965,16 +965,29 @@
 og last%0A
+      if (%0A  
       a.
@@ -1019,18 +1019,119 @@
 g%22) 
-%3E -1%0A    )
+=== -1 &&%0A        b.showcaseTags.indexOf(%22blog%22) %3E -1%0A      ) %7B%0A        return -1%0A      %7D%0A%0A      return 0%0A    %7D
 ,%0A  

fix Showcase order