import React, { Component } from 'react';
import { StaticQuery, graphql, Link } from 'gatsby';

interface Tag {
  tag: string;
  totalCount: number;
}

interface AllMarkdownRemark {
  group: Tag[];
}

interface QueryData {
  allMarkdownRemark: AllMarkdownRemark;
}
export default class TagCloud extends Component {
  render() {
    return (
      <div>
        <StaticQuery
          query={TAG_LIST}
          render={({ allMarkdownRemark }: QueryData) => {
            const tags: Tag[] = allMarkdownRemark.group.sort(function(a, b) {
              return b.totalCount - a.totalCount;
            });
            return (
              <ul>
                {tags.map(tag => {
                  return (
                    <Link key={tag.tag} to={`/tags/${tag.tag}`}>
                      <li>{`#${tag.tag} (${tag.totalCount})`}</li>
                    </Link>
                  );
                })}
              </ul>
            );
          }}
        />
      </div>
    );
  }
}

//graphQL
const TAG_LIST = graphql`
  {
    allMarkdownRemark {
      group(field: frontmatter___tags) {
        tag: fieldValue
        totalCount
      }
    }
  }
`;