import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import {
  Link,
} from 'react-router-dom';

import block from '../../../helpers/bem-cn';

import Icon from '../../Icon/Icon';

const propTypes = {
    className: PropTypes.string,
};

// temporary inline styles untill designer will provide warning icon
const style = {
    color: 'red',
    fontSize: '30px',
};

class Incorrect extends PureComponent {
    state = {
        isOpen: true,
    }

    handleClose = () => {
        console.log('CLOSE');
        this.setState(prevState => ({ isOpen: false }));
    }

    renderInfo = () => {
        const b = block('j-healthcheck__incorrect');

        if (this.state.isOpen) {
            return (
                <div className={b.mix('j-pane')}>
                    {/*<Icon type="correct" className={b('icon')()} />*/}
                    <h1 style={style}>!</h1> {/* @TODO: REMOVE after designer will provide icon */}
                    <p className={b('text')}>
                        Some services are unvailable. Check it on Health Check list <Link to="/healthcheck">here</Link>.
                    </p>
                    <button className={b('close')} onClick={this.handleClose}>
                        <Icon type="close" />
                    </button>
                </div>
            );
        }

        return null;
    }

    render() {
        return (
            this.renderInfo()
        );
    }
};

Incorrect.propTypes = propTypes;

export default Incorrect;

@@ -606,20 +606,10 @@
 nder
-Info = () =%3E
+()
  %7B%0A 
@@ -1365,88 +1365,8 @@
    %7D
-%0A%0A    render() %7B%0A        return (%0A            this.renderInfo()%0A        );%0A    %7D
 %0A%7D;%0A

fix in render