/**
*
* CustomPopOver
*
*/

import PropTypes from 'prop-types';

import React from 'react';
// import styled from 'styled-components';
import {CapPopover} from '@capillarytech/cap-ui-library';
import { FormattedMessage } from 'react-intl';
// import messages from './messages';
import _ from "lodash";

import messages from './messages';

class CustomPopOver extends React.Component { // eslint-disable-line react/prefer-stateless-function
  componentWillMount() {
    
  }

  componentWillReceiveProps(nextProps) {
    
  }

  renderPopoverContent() {
    const elem = [];
    _.forEach(this.props.popOverList, (content, index) => {
      
      if (this.props.excludeList.indexOf(content.iso_code) === -1) {
        elem.push(
          <p style={{ cursor: "pointer"}} key={index} onClick={() => this.props.handlePopOverClick(content)}>{content.language}</p>
        );
      }
    });

    return elem;
  }

  render() {
    return (
      <div>
        <CapPopover
          id={this.props.id}
          className={this.props.className}
          trigger={this.props.trigger}
          placement={this.props.placement}
          visible={this.props.visible}
          onVisibleChange={this.props.onVisibleChange}
          style={{height: '100%'}}
          content={
            this.renderPopoverContent()
          }
        >
          <p style={{fontFamily: "open-sans", fontWeight: '600', display: `${this.props.popOverList.length === this.props.excludeList.length ? 'none' : ''}`}}><FormattedMessage {...messages.languages} /></p>
        </CapPopover>
      </div>
    );
  }
}

CustomPopOver.defaultProps = {
  id: 'popover',
  className: '',
  trigger: "click",
  placement: "bottomLeft",
  popOverList: [],
  excludeList: [],
};

CustomPopOver.propTypes = {
  id: PropTypes.string,
  className: PropTypes.string,
  popOverList: PropTypes.array,
  excludeList: PropTypes.array,
  trigger: PropTypes.string,
  placement: PropTypes.string,
  visible: PropTypes.bool,
  onVisibleChange: PropTypes.func,
  handlePopOverClick: PropTypes.func,
};

export default CustomPopOver;
