import React, { Component } from 'react'
import PropTypes from 'prop-types'
import c from 'classnames'

import DropdownBlue from '../../assets/images/dropdown-blue.svg'
import DropupBlue from '../../assets/images/dropup-blue.svg'
import './contextual-info.scss'

class ContextualInfo extends Component {
  static propTypes = {
    openDetailsText: PropTypes.string,
    renderTransactionDetails: PropTypes.func,
    contextualInfo: PropTypes.string,
    isError: PropTypes.bool
  }

  static defaultProps = {
    openDetailsText: 'Transaction Details',
    closeDetailsText: 'Hide Details',
    renderTransactionDetails() {},
    contextualInfo: '',
    isError: false
  }

  state = {
    showDetails: false
  }

  renderDetails() {
    if (!this.state.showDetails) {
      return null
    }

    return <div className="contextual-info__details">{this.props.renderTransactionDetails()}</div>
  }

  render() {
    const { openDetailsText, closeDetailsText, contextualInfo, isError } = this.props

    if (contextualInfo) {
      return (
        <div className={c({ 'contextual-info--error': isError }, 'contextual-info__summary-wrapper')}>
          <div>{contextualInfo}</div>
        </div>
      )
    }

    return [
      <div
        key="open-details"
        className="contextual-info__summary-wrapper contextual-info__open-details-container"
        onClick={() =>
          this.setState(prevState => {
            return { showDetails: !prevState.showDetails }
          })
        }
      >
        {!this.state.showDetails ? (
          <>
            <span>{openDetailsText}</span>
            <img src={DropdownBlue} alt="dropdown" />
          </>
        ) : (
          <>
            <span>{closeDetailsText}</span>
            <img src={DropupBlue} alt="dropup" />
          </>
        )}
      </div>,
      this.renderDetails()
    ]
  }
}

export default ContextualInfo
