text: import React from "react"
  import PropTypes from "prop-types"
  import { rhythm, scale } from "../utils/typography"
  // Utilities
  import kebabCase from "lodash/kebabCase"
  
  // Components
  import { Helmet } from "react-helmet"
  import { Link, graphql } from "gatsby"
  import Bio from "../components/bio"
  
  //Adding toggle to Tags overall summary
  import ThemeContext from "../context/ThemeContext"
  import Switch from "react-switch"
  
  import "../components/layout.css"
  
  const TagsPage = ({
    data: {
      allMdx: { group },
      site: {
        siteMetadata: { title },
      },
    },
  }) => (
      <ThemeContext.Consumer>
        {theme => (
          <div className={theme.dark ? "dark" : "light"}>
            <div>
              <div
                style={{
                  marginLeft: `auto`,
                  marginRight: `auto`,
                  maxWidth: rhythm(24),
                  padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
                  minHeight: `100vh`,
                }}
              >
                <h1
                  style={{
                    ...scale(1.5),
                    marginBottom: rhythm(1.5),
                    marginTop: 0,
                  }}
                >
                  <Link
                    style={{
                      boxShadow: `none`,
                      textDecoration: `none`,
                    }}
                    to={`/`}
                  >
                    {title}
                  </Link>
                </h1>
                <div
                  id="toggleTheme"
                  style={{ display: `flex`, justifyContent: `flex-end` }}
                >
                  <Switch
                    onChange={theme.toggleDark}
                    checked={theme.dark}
                    onColor="#292D3E"
                    offColor="#292D3E"
                    offHandleColor="#fefefe"
                    onHandleColor="#586184"
                    checkedIcon={
                      <span
                        style={{ marginLeft: "0.3rem" }}
                        role="img"
                        aria-label="sun"
                      >
                        🌞
                    </span>
                    }
                    uncheckedIcon={
                      <span
                        style={{ marginLeft: "0.3rem" }}
                        role="img"
                        aria-label="moon"
                      >
                        🌒
                    </span>
                    }
  
                    activeBoxShadow="0 0 2px 3px #226597"
                  />
                </div>
                <Bio />
                <Helmet title={title} />
  
                <div>
                  <h1>Tags</h1>
                  <ul>
                    {group.map(tag => (
                      <li key={tag.fieldValue} style={{ listStyle: `none` }}>
                        <Link
                          to={`/tags/${kebabCase(tag.fieldValue)}/`}
                          className={`${tag.fieldValue} alltags`}
                        >
                          {tag.fieldValue.replace(/-/g, " ")} ({tag.totalCount})
                      </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          </div>
        )}
      </ThemeContext.Consumer>
    )
  
  TagsPage.propTypes = {
    data: PropTypes.shape({
      allMarkdownRemark: PropTypes.shape({
        group: PropTypes.arrayOf(
          PropTypes.shape({
            fieldValue: PropTypes.string.isRequired,
            totalCount: PropTypes.number.isRequired,
          }).isRequired
        ),
      }),
      site: PropTypes.shape({
        siteMetadata: PropTypes.shape({
          title: PropTypes.string.isRequired,
        }),
      }),
    }),
  }
  
  export default TagsPage
  
  export const pageQuery = graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
      allMdx(limit: 2000) {
        group(field: frontmatter___tags) {
          fieldValue
          totalCount
        }
      }
    }
  `
  