import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Container, Loader } from 'semantic-ui-react';
import ReactTable from 'react-table';
import 'react-table/react-table.css';

import MainMenu from '../../components/MainMenu';
import { fetchIncidents } from '../../store/actions';
import { incidentsReportHeaderTitles } from '../../constants/menuItems';
import { incidentDescriptions, incidentLevelDescriptions, UNSCHEDULED_INCIDENT, UNLOCKED_INCIDENT } from '../../constants/enums';

class IncidentsReport extends Component {

    componentDidMount() {
        const { fetchIncidents } = this.props;
        fetchIncidents();
    }

    render () {
        const { pendingIncidents, incidents } = this.props;

        const columns = [];
        if (incidents && incidents.length > 0){
            const incidentHeaders = Object.keys(incidentsReportHeaderTitles);

            incidentHeaders.forEach((header) => {
                const columnTitle = incidentsReportHeaderTitles[header];

                if (columnTitle){
                    const columnAlignments = {
                        left: 'left',
                        right: 'right',
                    };
                    let columnContentsAlignment = columnAlignments.left;

                    columns.push({
                        Header: incidentsReportHeaderTitles[header],
                        accessor: header,
                        Cell: props => {
                            let cellValue;

                            switch (props.column.id) {
                                case 'incidentType':
                                    cellValue = incidentDescriptions[props.value];
                                    break;
                                case 'incidentLevel':
                                    cellValue = incidentLevelDescriptions[props.value];
                                    break;

                                case 'feeDescription':
                                    const { incidentType, incidentLevel, timeIntervalsToCharge } = props.row['_original'];
                                    switch (incidentType) {
                                        case UNLOCKED_INCIDENT:
                                            cellValue = `${incidentLevelDescriptions[incidentLevel]}`;
                                            break;
                                        case UNSCHEDULED_INCIDENT:
                                            cellValue = `${timeIntervalsToCharge} x 5 min`;
                                            break;
                                    }
                                    break;

                                case 'totalChargeFee':
                                    const totalFee = props.value ? props.value : props.row['_original'].incidentPrice;
                                    const totalFeeFormatted = parseFloat(totalFee).toFixed(2);
                                    cellValue = `$ ${totalFeeFormatted}`;
                                    columnContentsAlignment = columnAlignments.right;
                                    break;

                                default:
                                    cellValue = props.value;
                            }

                            return <div style={{ textAlign: columnContentsAlignment }}>{cellValue}</div>
                        }
                    });
                }
            });
        }

        return (
            <Container>
                <MainMenu/>
                <h3>Incidents Report</h3>
                <hr/>
                <Loader active={pendingIncidents} />
                {
                    !pendingIncidents && incidents &&
                    <ReactTable
                        data={incidents}
                        multiSort={false}
                        columns={columns}
                    />
                }
            </Container>
        );
    }
}

const mapStateToProps = (state) => ({
    pendingIncidents: state.incidentsReport.pending,
    incidents: state.incidentsReport.result,
});

const mapDispatchToProps = (dispatch) => ({
    fetchIncidents: () => fetchIncidents(dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(IncidentsReport);