<div id="app"></div>

* {
  box-sizing: border-box;
}

body, html, #app {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/*! modernizr 3.6.0 (Custom Build) | MIT *
 * https://modernizr.com/download/?-generatedcontent-setclasses !*/
!function(e,n,t){function o(e,n){return typeof e===n}function s(){var e,n,t,s,a,i,r;for(var l in d)if(d.hasOwnProperty(l)){if(e=[],n=d[l],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(s=o(n.fn,"function")?n.fn():n.fn,a=0;a<e.length;a++)i=e[a],r=i.split("."),1===r.length?Modernizr[r[0]]=s:(!Modernizr[r[0]]||Modernizr[r[0]]instanceof Boolean||(Modernizr[r[0]]=new Boolean(Modernizr[r[0]])),Modernizr[r[0]][r[1]]=s),f.push((s?"":"no-")+r.join("-"))}}function a(e){var n=p.className,t=Modernizr._config.classPrefix||"";if(u&&(n=n.baseVal),Modernizr._config.enableJSClass){var o=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(o,"$1"+t+"js$2")}Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),u?p.className.baseVal=n:p.className=n)}function i(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):u?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}function r(){var e=n.body;return e||(e=i(u?"svg":"body"),e.fake=!0),e}function l(e,t,o,s){var a,l,f,d,c="modernizr",u=i("div"),h=r();if(parseInt(o,10))for(;o--;)f=i("div"),f.id=s?s[o]:c+(o+1),u.appendChild(f);return a=i("style"),a.type="text/css",a.id="s"+c,(h.fake?h:u).appendChild(a),h.appendChild(u),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(n.createTextNode(e)),u.id=c,h.fake&&(h.style.background="",h.style.overflow="hidden",d=p.style.overflow,p.style.overflow="hidden",p.appendChild(h)),l=t(u,e),h.fake?(h.parentNode.removeChild(h),p.style.overflow=d,p.offsetHeight):u.parentNode.removeChild(u),!!l}var f=[],d=[],c={_version:"3.6.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){d.push({name:e,fn:n,options:t})},addAsyncTest:function(e){d.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=c,Modernizr=new Modernizr;var p=n.documentElement,u="svg"===p.nodeName.toLowerCase(),h=c.testStyles=l;h('#modernizr{font:0/0 a}#modernizr:after{content:":)";visibility:hidden;font:7px/1 a}',function(e){Modernizr.addTest("generatedcontent",e.offsetHeight>=6)}),s(),a(f),delete c.addTest,delete c.addAsyncTest;for(var m=0;m<Modernizr._q.length;m++)Modernizr._q[m]();e.Modernizr=Modernizr}(window,document);


const styled = styled.default


function ValueInterface({ value, change }) {
  const add = () => change(value + 1);
  const select = event => change(event.target.value);
  const shade = 225 - (value * 25);
  const size = (1 / 5 * value) + 1;
  
    const Modern = styled.button`
    position: relative;
    font-size: 20px;
    display: inline-block;
    width: 100%;
    padding: 10px;
    display: block;
    border-width: 0;
    background: none;
    outline: 0 !important;
    cursor: pointer;   
    color: rgb(${shade}, ${shade}, ${shade});
    transform: scale(${size});

    &::before {
      display: inline-block;
      content: "❤";
    }
  `;
  
  const Base = styled.select`
    padding: 8px;

    width: 100%;
    padding: 0.5rem;
  `;
  
  const string = value < 1 && ' Click here to add likes!';

  if (CSS.supports('transform: scale(2)') && Modernizr.generatedcontent) {
    return (
      <React.Fragment>
        <Modern type="button" onClick={add}>{string}</Modern> 
        <input type="hidden" name="liked" value={value} />
      </React.Fragment>
    )
  }
  
  return (
    <Base value={value} onChange={select}>
      {
        [1,2,3,4,5,6,7,8,9].map(val => (
          <option value={val} key={val}>{val}</option>
        ))
      }
    </Base>
  );
}



function Markup({ liked, changeLike }) {
  const Overlay = styled.div`
    background: grey;
    border: 1px solid grey;
    display: block;
    padding: 64px;

    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
  `;
  
  const Popup = styled.div`
    padding: 32px;
    background: white;

    border-radius: 8px;
    border: 1px solid grey;
    padding: 2rem;
    background-color: rgba(255, 255, 255, 1);
    min-width: 240px;
    max-width: 80%;
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
  `;

  const Title = styled.h2`
    margin-bottom: 32px;    

    margin-bottom: 2rem;
  `
  
  const Button = styled.button`
    background-color: #e0e1e2;
    color: #5c5c5c;
    padding: 16px;
    font-weight: bold;
    margin-top: 16px;
    margin-right: 12px;
    font-weight: bold;

    width: 100%;
    border-width: 0;
    border-radius: 4px;
    background-color: rgba(225, 225, 225, 1);
    padding: 1rem;
    color: rgba(95, 95, 95, 1);
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    cursor: pointer;
    font-weight: 700;
    margin-top: 1rem;
    margin-right: 0.75rem;

    &:hover {
      background-color: #c6c8c9;

      background-color: #c6c8c9;
    }
  `

  return (
    <Overlay>
      <Popup>
        <Title>How much do you like popups?</Title>
        <form>
          <ValueInterface value={liked} change={changeLike} />
          <Button type="submit">Submit</Button>
        </form>
      </Popup>
    </Overlay>
  );
}


class Example extends React.Component {
  constructor(...params) {
    super(...params);
    
    this.state = {
      liked: 0,
    }
    
    this.events = {
      changeLike: this.changeLike.bind(this),
    }
  }
  
  changeLike(newValue) {
    const { liked } = this.state;
    event.preventDefault();
    const isValid = newValue > 0 && newValue <= 9;
    this.setState({ liked: isValid ? newValue : liked })
    return null;
  }
  
  render() {
    const { liked } = this.state;
    const { changeLike } = this.events;
    return <Markup {...{ liked, changeLike }} />;
  }
}


ReactDOM.render(
  <Example />,
  document.getElementById('app'),
)