import React from 'react';
import {Accordion, Label} from 'semantic-ui-react';
import SingleIncidentsTable from './components/SingleIncidentsTable';
import {
    UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION, UNLOCKED_INCIDENT_STANDALONE, UNSCHEDULED_INCIDENT_AFTER_RESERVATION,
    UNSCHEDULED_INCIDENT_BEFORE_RESERVATION, UNSCHEDULED_INCIDENT_STANDALONE
} from '../../constants/enums';

export default function MemberIncidentsTables (props) {
    const { pendingIncidents, incidents, hideMemberName } = 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 = (
        <SingleIncidentsTable
            loading={pendingIncidents}
            incidents={incidentsRelatedToReservations}
            openMemberSummaryOnMemberClick
            showBookingTimes
            hideMemberName={hideMemberName}
        />
    );

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

    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 (
        <Accordion
            panels={accordionPanels}
            exclusive={false}
            defaultActiveIndex={[0]}
            fluid
        />
    );
}