import React from 'react'
import Link from 'gatsby-link'
import styled from 'styled-components'
import { media } from '../utils/style'

import PostList from '../component/PostList'

const SearchKeyword = styled.h1`
  text-align: center;
  ${media.mobile`font-size: 1rem;`} 
`

class SearchPage extends React.Component {
  state = {
    searchKeyword: null,
  }

  componentDidMount() {
    const { search } = window.location
    const searchKeyword = search
      .replace('?', '')
      .split('&')
      .reduce((_, params) => {
        const [key, value] = params.split('=')
        return (key === 'q' && decodeURIComponent(value)) || ''
      }, '')
    this.setState({ searchKeyword })
  }

  getNodesWithSearchKeyword(searchKeyword) {
    if (!searchKeyword) return []
    return this.props.data.allMarkdownRemark.edges
      .map(({ node }) => node)
      .filter(({ fields, frontmatter, html }) => {
        return (
          fields.slug.includes(searchKeyword) ||
          frontmatter.title.includes(searchKeyword) ||
          frontmatter.date.includes(searchKeyword) ||
          html.includes(searchKeyword)
        )
      })
  }

  render() {
    const resultNodes = this.getNodesWithSearchKeyword(this.state.searchKeyword);
    return (
      <div>
        <Link to="/"> Go to Home</Link>
        <SearchKeyword>
          {this.state.searchKeyword && resultNodes.length > 0 &&
            `😀 ${resultNodes.length} results about '${
              this.state.searchKeyword
            }'`}
          {this.state.searchKeyword && resultNodes.length === 0 &&
            `🙃 no results about '${this.state.searchKeyword}'`}
        </SearchKeyword>
        {resultNodes.length > 0 && <PostList markdownNodes={resultNodes} />}
      </div>
    )
  }
}

export default SearchPage

export const query = graphql`
query SearchPageQuery {
  allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
    totalCount
    edges {
      node {
        id
        frontmatter {
          title
          category
          date(formatString: "YYYY-MM-DD")
          description
        }
        fields {
          slug
        }
        html
      }
    }
  }
}
`

// export const query = graphql`
//   query SearchPageQuery {
//     allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
//       totalCount
//       edges {
//         node {
//           id
//           frontmatter {
//             title
//             date(formatString: "YYYY-MM-DD")
//           }
//           fields {
//             slug
//           }
//           html
//         }
//       }
//     }
//   }
// `

@@ -23,39 +23,8 @@
 ct'%0A
-import Link from 'gatsby-link'%0A
 impo
@@ -61,47 +61,8 @@
 nts'
-%0Aimport %7B media %7D from '../utils/style'
 %0A%0Aim
@@ -138,10 +138,11 @@
 led.
-h1
+div
 %60%0A  
@@ -165,45 +165,8 @@
 er;%0A
-  $%7Bmedia.mobile%60font-size: 1rem;%60%7D %0A
 %60%0A%0Ac
@@ -963,32 +963,97 @@
 archKeyword) %7C%7C%0A
+          (frontmatter.keywords%7C%7C %5B%5D).includes(searchKeyword) %7C%7C%0A
           html.i
@@ -1202,239 +1202,111 @@
     
-return (%0A      %3Cdiv%3E%0A        %3CLink to=%22/%22%3E Go to Home%3C/Link%3E%0A        %3CSearchKeyword%3E%0A          %7Bthis.state.searchKeyword && resultNodes.length %3E 0 &&%0A            %60%F0%9F%98%80 $%7BresultNodes.length%7D results about '$%7B%0A              this.state.s
+if (!this.state.searchKeyword)%7B%0A      return null;%0A    %7D%0A    return (%0A      %3CReact.Fragment%3E%0A        %3CS
 earc
@@ -1313,16 +1313,17 @@
 hKeyword
+%3E
 %0A       
@@ -1331,103 +1331,36 @@
     
-%7D'%60%7D%0A          %7Bthis.state.searchKeyword && resultNodes.length === 0 &&%0A            %60%F0%9F%99%83 no resul
+%7B%60$%7BresultNodes.length %7D pos
 ts a
@@ -1364,17 +1364,17 @@
 s about 
-'
+%22
 $%7Bthis.s
@@ -1392,17 +1392,17 @@
 Keyword%7D
-'
+%22
 %60%7D%0A     
@@ -1432,35 +1432,8 @@
     
- %7BresultNodes.length %3E 0 &&
  %3CPo
@@ -1469,17 +1469,16 @@
 odes%7D /%3E
-%7D
 %0A      %3C
@@ -1478,19 +1478,30 @@
       %3C/
-div
+React.Fragment
 %3E%0A    )%0A
@@ -1756,27 +1756,8 @@
 tle%0A
-          category%0A
     
@@ -1813,24 +1813,62 @@
 description%0A
+          category%0A          keywords%0A
         %7D%0A  
@@ -1946,449 +1946,4 @@
 %7D%0A%60%0A
-%0A// export const query = graphql%60%0A//   query SearchPageQuery %7B%0A//     allMarkdownRemark(sort: %7B order: DESC, fields: %5Bfrontmatter___date%5D %7D) %7B%0A//       totalCount%0A//       edges %7B%0A//         node %7B%0A//           id%0A//           frontmatter %7B%0A//             title%0A//             date(formatString: %22YYYY-MM-DD%22)%0A//           %7D%0A//           fields %7B%0A//             slug%0A//           %7D%0A//           html%0A//         %7D%0A//       %7D%0A//     %7D%0A//   %7D%0A// %60%0A

Add search page