import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Container, Accordion, Label } from 'semantic-ui-react';

import MainMenu from '../../components/MainMenu';
import DateRangePicker from '../../components/DateRangePicker';
import MemberIncidentsTable from '../../components/MemberIncidentsTable';

import { fetchIncidents } from '../../store/actions';

import {
    UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION,
    UNLOCKED_INCIDENT_STANDALONE, UNSCHEDULED_INCIDENT_AFTER_RESERVATION,
    UNSCHEDULED_INCIDENT_BEFORE_RESERVATION,
    UNSCHEDULED_INCIDENT_STANDALONE
} from '../../constants/enums';

class IncidentsReport extends Component {
    onDatesUpdate(dateRange) {
        const { fetchIncidents } = this.props;
        fetchIncidents(dateRange);
    }

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

        const incidentsRelatedToReservations = [];
        const standaloneIncidents = [];

        if (Array.isArray(incidents)){
            incidents.forEach((incident) => {
                if (incident && incident.incidentType){
                    switch (incident.incidentType) {
                        case UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION:
                        case UNSCHEDULED_INCIDENT_BEFORE_RESERVATION:
                        case UNSCHEDULED_INCIDENT_AFTER_RESERVATION:
                            incidentsRelatedToReservations.push(incident);
                            break;
                        case UNLOCKED_INCIDENT_STANDALONE:
                        case UNSCHEDULED_INCIDENT_STANDALONE:
                            standaloneIncidents.push(incident);
                            break;
                    }
                }
            });
        }

        const incidentsRelatedToReservationsTable = (
            <MemberIncidentsTable
                loading={pendingIncidents}
                incidents={incidentsRelatedToReservations}
                openMemberSummaryOnMemberClick
                showBookingTimes
            />
        );

        const standaloneIncidentsTable = (
            <MemberIncidentsTable
                loading={pendingIncidents}
                incidents={standaloneIncidents}
                openMemberSummaryOnMemberClick
                showDoorLockEntryTimes
            />
        );

        const accordionPanels = [
            {
                key: 'related-door-lock-incidents',
                title : { content: <Label color='blue' content={'Door Lock Charges - Related to reservations'} /> },
                content: { content : incidentsRelatedToReservationsTable },
            },
            {
                key: 'standalone-door-lock-incidents',
                title : { content: <Label color='blue' content={'Door Lock Charges - Standalone'} /> },
                content: { content: standaloneIncidentsTable },
            },
            {
                key: 'reservation-modification-incidents',
                title: {content: <Label color='blue' content={'Cancellation charges'}/>},
            }
        ];

        return (
            <Container>
                <MainMenu/>
                <h3>Incidents Report</h3>
                <hr/>
                <DateRangePicker buttonLabel="Show report" onDatesUpdate={this.onDatesUpdate.bind(this)} />
                <br/>
                <Accordion
                    panels={accordionPanels}
                    exclusive={false}
                    defaultActiveIndex={[0]}
                    fluid
                />
            </Container>
        );
    }
}

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

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

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