const Logo = (props) => {
  return (
    <svg
        className="logo"

        width="100%"
        height="100%"
        xmlns="http://www.w3.org/2000/svg"
        xmlnsXlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 25 30"
    >
      <path
        fill-rule="evenodd"
        fill="currentColor"
        d="M21 7v1h2v2l-1 1v3l1 1v9h-2V14l-1-1h-2V3l-3-3H5L2 3v25H0v2h20v-2h-2V14h2v10l1 1h2l1-1v-9l1-1V9l-2-2h-2zm-5 6H4V3l1-1h10l1 1v10z"
      />
    </svg>
  );
}


class TypeWriter extends React.Component {
  typeEffect = React.createRef();

  componentDidMount() {
    const longPause = 1000;
    const shortPause = 500;
    const deleteDelay = 15;
    const typeDelay = 8;
    
    const config = {
      delay: typeDelay,
      wrapperClassName: `text-wrapper`,
      cursorClassName: `text-caret`,
    };
    
    const wrapper = this.typeEffect.current;
    const typewriter = new Typewriter(wrapper, config);

    const clients = [
      `games for Apple`,
      `popup markets for Popshop`,
      `unusual dating apps for Apartner`,
      `an indie games portal for Bigpoint`,
      `web apps for Avingo nurses`,
      `backend systems for MGM`,
    ];
    
    const shuffledClients = window.knuthShuffle(clients.slice(0));
    
    typewriter
      .changeDeleteSpeed(deleteDelay)
      .typeString(`Hi interested internet-<em>er</em>!`)
      .pauseFor(longPause)
      .typeString(`<span> </span>We’re the Web Engineering team at <a href="https://fueled.com">Fueled</a>.`)
      .pauseFor(shortPause)
      .typeString(`<span> </span>We build web <em>things</em>…`)
      .pauseFor(longPause)
      .deleteChars(18)
      .typeString(`’ve built `);
    
    shuffledClients.forEach(client => {
      console.log(client, client.length);
      typewriter
        .typeString(`<strong>${client}.<strong>`)
        .pauseFor(shortPause)
        .deleteChars(client.length + 1);
    });
    
    const jobsUrl = label => `<a href="https://fueled.com/jobs">${label}</a>`;
    
    typewriter
      .deleteChars(15)
      .typeString(`The internet ain’t shrinking, there’s so much more to be built…`)
      .pauseFor(longPause)
      .typeString(`<span> </span>Want in?`)
      .pauseFor(shortPause)
      .typeString(` ${jobsUrl(`We’re hiring!`)}`)
      .pauseFor(5000)
      .deleteChars(22)
      .typeString(`What are you waiting for?`)
      .pauseFor(shortPause)
      .typeString(` ${jobsUrl(`Join the team!`)}`);
    
    typewriter.start();
  };
  
  render() {
    return <div class="text" ref={this.typeEffect}>{this.props.text}</div>;
  };
};

class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <Logo fill="violet" />
        <TypeWriter />
      </React.Fragment>
    );
  };
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);