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

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

import Correct from './Correct';
import Icon from '../../Icon/Icon';
import Pagination from '../../Pagination/Pagination';
import HealthCheckModal from '../../modals/HealthCheckModal/HealthCheckModal';

import './HealthCheckList.css';

const b = block('j-healthcheck');
const bList = block(b('list')());
const bItem = block(b('list-item')());

const propTypes = {
    clearHealthCheckDetails: PropTypes.func.isRequired,
    currentPageIndex: PropTypes.number.isRequired,
    fetchHealthCheckList: PropTypes.func.isRequired,
    fetchHealthCheckItem: PropTypes.func.isRequired,
    healthcheckList: PropTypes.arrayOf(PropTypes.object).isRequired,
    setCurrentPageIndex: PropTypes.func.isRequired,
};

class HealthCheckList extends PureComponent {
    componentDidMount() {
        this.props.fetchHealthCheckList();
    }

    test = name => {
        this.props.fetchHealthCheckItem(name);
    }

    renderList = () => {
        return (
            <div>Oooops</div>
        );
    }

    renderHealthcheckInfo = list => {
        const {
            clearHealthCheckDetails,
            problemToDisplay,
            status,
        } = this.props;

        if (status) {
            return (
                <div className={b('pane').mix('j-pane')}>
                    <Correct className={b('correct')()} />
                </div>
            );
        }

        return (
            <div className={bList()}>
                {
                    list.map(item => {
                        return (
                            <div className={bItem()} key={item.name}>
                                <div className={bItem('name')}>{item.name}</div>
                                <div className={bItem('message')}>{item.message}</div>
                                <div className={bItem('details')} onClick={() => this.test(item.name)}>Show Details</div>
                                <Link to={`/${item.name}`}>
                                    <Icon type="edit" />
                                </Link>
                            </div>
                        );
                    })
                }

                <HealthCheckModal
                    className={b('modal')()}
                    isOpen={!R.isEmpty(problemToDisplay)}
                    closeModal={clearHealthCheckDetails}
                    message={problemToDisplay.status}
                    statusText={problemToDisplay.name}
                    problems={problemToDisplay.list}
                />
            </div>
        );
    }

    render() {
        return (
            <Pagination
                list={this.props.healthcheckList}
                itemsPerPage={3}
                currentPageIndex={this.props.currentPageIndex}
                changePageIndex={this.props.setCurrentPageIndex}
                maximumVisiblePaginators={3}
                renderChildren={this.renderHealthcheckInfo}
            />
        );
    }
};

HealthCheckList.propTypes = propTypes;

export default HealthCheckList;

@@ -1017,20 +1017,34 @@
  %7D%0A%0A    
-t
+handleShowDetail
 es
-t
  = name 
@@ -1106,98 +1106,8 @@
  %7D%0A%0A
-    renderList = () =%3E %7B%0A        return (%0A            %3Cdiv%3EOooops%3C/div%3E%0A        );%0A    %7D%0A%0A
     
@@ -1950,12 +1950,26 @@
 his.
-t
+handleShowDetail
 es
-t
 (ite

remove redundant stuff and rename method