import fontCSS from '!!raw-loader!../../custom-properties/font.css'

import React from 'react'

export default function FontSample(props) {
  return (
    <details className="g-font-samples">
      <summary>
        <h4>Samples</h4>
      </summary>
      <FontSwatches {...props} />
      <FontSentences {...props} />
    </details>
  )
}

export function FontSwatches(props) {
  return (
    <section className="g-font-swatches" aria-label="Swatch Samples">
      {props.fontWeights.map(fontWeight => (
        <figure key={fontWeight}>
          <p
            style={{
              fontFamily: `var(${props.customProperty})`,
              fontWeight: fontWeight
            }}
          >
            Aa
          </p>
          <figcaption>
            <code>font-weight: {fontWeight}</code>
          </figcaption>
        </figure>
      ))}
    </section>
  )
}

export function FontSentences(props) {
  return (
    <section className="g-font-sentences" aria-label="Sentence Samples">
      {props.fontWeights.map(fontWeight => (
        <section key={fontWeight}>
          <h6>
            <code>font-weight: {fontWeight}</code>
          </h6>
          <div
            style={{
              fontFamily: `var(${props.customProperty})`,
              fontWeight: fontWeight
            }}
          >
            <p>The quick fox jumps over the lazy dog</p>
            <p>The quick fox jumps over the lazy dog</p>
          </div>
        </section>
      ))}
    </section>
  )
}

export function FontStyle() {
  return (
    <style>
      {fontCSS}
      {`
.g-font-samples {
  margin-bottom: 2rem;
}

.g-font-samples[open] {
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
  padding-bottom: 1rem;
}

.g-font-samples summary > * {
  color: #333333;
  display: inline;
  font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 100%;
  margin: 0.5rem 0 0.25rem;
  padding: 0;
  position: relative;
}

.g-font-samples[open] > summary + * {
  margin-top: 2rem;
}

.g-font-samples code {
  background-color: #F8F8F8;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #EEEEEE;
  color: inherit;
  display: inline-block;
  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
  font-size: 13px;
  margin: 1em 0 2px;
  padding: 0 5px;
  vertical-align: baseline;
  white-space: nowrap;
}

.g-font-swatches {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}

.g-font-swatches > figure {
  display: flex;
  flex-direction: column;
  margin: 0 2rem 1rem 0;
  text-align: center;
}

.g-font-swatches > figure > p {
  background-color: #eff5ff;
  font-size: 128px;
  line-height: 1;
  margin: 0;
  padding: 2rem;
}

.g-font-sentences p {
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  display: block;
  font: inherit;
  line-height: 1.5;
  margin: 1rem 0 1rem 1rem;
  padding: 0.75rem 1rem;
}

.g-font-sentences p + p {
  font-size: 200%;
}
`}
    </style>
  )
}