import React from "react"
import { Link } from "gatsby"
import presets, { colors } from "../../utils/presets"
import { options, rhythm } from "../../utils/typography"
import sharedStyles from "../shared/styles"
import FaExtLink from "react-icons/lib/fa/external-link"

const Details = ({
  allDeps,
  shownDeps,
  showAllDeps,
  showMore,
  startersYaml,
}) => (
  <div
    css={{
      padding: sharedStyles.gutter,
      [presets.Desktop]: {
        padding: sharedStyles.gutterDesktop,
        display: `grid`,
        gridTemplateColumns: `auto 1fr`,
        gridRowGap: `20px`,
      },
    }}
  >
    <div
      css={{
        color: colors.gray.calm,
        fontFamily: options.headerFontFamily.join(`,`),
        paddingRight: 20,
      }}
    >
      Tags
    </div>
    <div>{startersYaml.tags.join(`, `)}</div>

    <div
      css={{
        color: colors.gray.calm,
        fontFamily: options.headerFontFamily.join(`,`),
        paddingRight: 20,
      }}
    >
      Description
    </div>
    <div>{startersYaml.description}</div>

    <div
      css={{
        color: colors.gray.calm,
        fontFamily: options.headerFontFamily.join(`,`),
        paddingRight: 20,
      }}
    >
      Features
    </div>
    <div>
      {startersYaml.features ? (
        <ul css={{ marginTop: 0 }}>
          {startersYaml.features.map((f, i) => (
            <li key={i}>{f}</li>
          ))}
        </ul>
      ) : (
        `No features`
      )}
    </div>

    <div
      css={{
        color: colors.gray.calm,
        fontFamily: options.headerFontFamily.join(`,`),
        paddingRight: 20,
      }}
    >
      Dependencies
    </div>

    <div>
      <div
        css={{
          display: `grid`,
          gridAutoRows: `50px`,
          marginBottom: rhythm(options.blockMarginBottom * 5),
          [presets.Desktop]: {
            gridTemplateColumns: `repeat(3, 1fr)`,
            gridColumnGap: 20,
          },
        }}
      >
        {shownDeps &&
          shownDeps.map(
            dep =>
              /^gatsby-/.test(dep) ? (
                <div key={dep}>
                  <Link to={`/packages/${dep}`}>{dep}</Link>
                </div>
              ) : (
                <div
                  key={dep}
                  css={{
                    ...sharedStyles.truncate,
                    marginBottom: `1rem`,
                  }}
                >
                  <a href={`https://npm.im/${dep}`}>
                    {`${dep} `}
                    <FaExtLink />
                  </a>
                </div>
              )
          )}
        {showMore && (
          <button css={{ ...styles.showMoreButton }} onClick={showAllDeps}>
            {`Show ${allDeps.length - shownDeps.length} more`}
          </button>
        )}
      </div>
    </div>
  </div>
)

export default Details

const styles = {
  showMoreButton: {
    border: 0,
    borderRadius: presets.radius,
    cursor: `pointer`,
    fontFamily: options.headerFontFamily.join(`,`),
    fontWeight: `bold`,
    padding: `${rhythm(1 / 5)} ${rhythm(2 / 3)}`,
    WebkitFontSmoothing: `antialiased`,
    "&&": {
      backgroundColor: colors.gatsby,
      borderBottom: `none`,
      boxShadow: `none`,
      color: `white`,
      "&:hover": {
        backgroundColor: colors.gatsby,
      },
    },
  },
}

@@ -1713,40 +1713,8 @@
 d%60,%0A
-          gridAutoRows: %6050px%60,%0A
     
@@ -1870,22 +1870,16 @@
     grid
-Column
 Gap: 20,
@@ -2276,50 +2276,8 @@
 te,%0A
-                    marginBottom: %601rem%60,%0A
     

Improve spacing of dependency grid in starter detail page (#10131)