import React, { Component } from "react";
import PropTypes from "prop-types";

import "./CardAdd.css";

class CardAdd extends Component {
  static propTypes = {
    networks: PropTypes.arrayOf(
      PropTypes.shape({
        name: PropTypes.string.isRequired,
        icon: PropTypes.string.isRequired
      })
    ),
    onNetworkClick: PropTypes.func
  };

  static defaultProps = {
    networks: [],
    onNetworkClick: () => {}
  };

  state = {
    option: false
  };

  openOptions = () => this.setState({ option: !this.state.option });

  renderOptions = () => {
    const { onNetworkClick, networks } = this.props;

    return (
      <ul className="es-card-add__options">
        {networks.map((network, index) => (
          <li onClick={() => onNetworkClick(network.name)} key={index}>
            <span className="es-card-add-icons">
              <i className={`es-icon es-icon-${network.icon}`} />
            </span>
            <span className="es-card-add-text">{network.name}</span>
          </li>
        ))}
      </ul>
    );
  };

  render() {
    const { option } = this.state;
    return (
      <div
        className={`es-card es-card-add ${option ? "open" : ""}`}
        onClick={this.openOptions}
        role="button"
      >
        {option ? (
          this.renderOptions()
        ) : (
          <i className="es-icon es-icon-add-circle" />
        )}
      </div>
    );
  }
}

export { CardAdd };