import React from 'react';
import styles from './style.js';
import EthereumLogo from './../assets/ethereum-logo.svg';
import MetamaskLogo from './../assets/metamask-logo.svg';

function capitalize(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

const NoConnection = ({ network }) => console.log(network) || (
  <div style={styles.NoEthereumSection}>
    <img style={styles.ImgHeaderLogo} alt="Status" src="images/logo.png" />
    <hr />
    <img
      style={styles.ImgEthereumLogo}
      alt="Ethereum"
      src={EthereumLogo}
    />
    <h2>NOT CONNECTED TO ETHEREUM {network.toUpperCase()}</h2>
    <p style={styles.PNotFound}>
      This application requires an Ethereum client to be running and connected to {capitalize(network)}. A client
      could not be detected which probably means it&#39;s not
      installed, running or is misconfigured.
    </p>
    <p style={styles.PUseClients}>
      Please use one of the following clients to connect to Ethereum:
    </p>
    <div style={styles.DivClients}>
      <div style={styles.DivSubClients}>
        <img style={styles.ImgLogo} alt="Metamask" src={MetamaskLogo} />
        <h2>METAMASK</h2>
        <p>
          <span style={styles.AlignNumber}>
            <span style={styles.NumberCircle}>1</span>
          </span>Install
          <a
            href="https://metamask.io/"
            rel="noopener noreferrer"
            target="_blank"
          >
            {" "}
            Metamask
          </a>
        </p>
        <p>
          <span style={styles.AlignNumber}>
            <span style={styles.NumberCircle}>2</span>
          </span>Use Chrome to browse
          <a
            rel="noopener noreferrer"
            href="https://vote.status.im"
            target="_blank"
          >
            {" "}
            https://vote.status.im
          </a>
        </p>
      </div>
      <div style={styles.DivSubClients}>
        <img style={styles.ImgLogo} alt="Mist" src="images/mist.png" />
        <h2>MIST</h2>
        <p>
          <span style={styles.AlignNumber}>
            <span style={styles.NumberCircle}>1</span>
          </span>Install and run
          <a
            rel="noopener noreferrer"
            href="https://github.com/ethereum/mist/releases"
            target="_blank"
          >
            {" "}
            Mist
          </a>
        </p>
        <p>
          <span style={styles.AlignNumber}>
            <span style={styles.NumberCircle}>2</span>
          </span>
          Use Mist to browse
          <a
            rel="noopener noreferrer"
            href="https://vote.status.im"
            target="_blank"
          >
            {" "}
            https://vote.status.im
          </a>
        </p>
      </div>
    </div>
  </div>
);

NoConnection.displayName = 'NoConnection';

export default NoConnection;