/**
*
* Card
*
*/

import PropTypes from 'prop-types';

import React from 'react';
import { Card } from 'antd';
import './_customCard.scss';

class CustomCard extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);
    this.handleMouseHover = this.handleMouseHover.bind(this);
    this.handleMouseClick = this.handleMouseClick.bind(this);
    this.state = {
      isHovering: false,
      isClicked: false,
    };
  }

  handleMouseClick() {
    this.setState(this.toggleClickedState);
    this.props.onClick(!this.state.isClicked, this.props.id);
  }

  toggleClickedState(state) {
    return {
      isClicked: !state.isClicked,
    };
  }

  handleMouseHover(data) {
    
    this.setState({isHovering: data});
    this.props.onHover(!this.state.isHovering, this.props.id);
  }

  toggleHoverState(state) {
    return {
      isHovering: !state.isHovering,
    };
  }

  render() {
    return (
      <Card
        className="custom-card"
        id={this.props.id}
        title={this.props.title}
        style={{ width: this.props.width, height: this.props.height }}
        onMouseEnter={() => this.handleMouseHover(true)}
        onClick={this.handleMouseClick}
        onMouseLeave={() => this.handleMouseHover(false)}>
        <div>
          <div className="content-wrapper">{this.props.content}</div>
          {this.props.footer ? <hr className="seperator-line" /> : ''}
          {this.props.footer ? <div className="footer-wrapper">{this.props.footer}</div> : ''}
        </div>
      </Card>
    );
  }
}

CustomCard.propTypes = {
  content: PropTypes.element.isRequired,
  width: PropTypes.string,
  height: PropTypes.string,
  footer: PropTypes.element,
  title: PropTypes.string,
  onHover: PropTypes.func,
  onClick: PropTypes.func,
  id: PropTypes.string.isRequired,
};

export default CustomCard;
