import React from 'react';
import { Loader, Grid } from 'semantic-ui-react';

import { UNSCHEDULED_INCIDENT, UNLOCKED_INCIDENT } from '../../../constants/enums';

const MemberSummary = props => {
    const { loading } = props;
    const incidents = props.incidents ? props.incidents : [];

    let totalUnscheduledFees = 0;
    let totalUnlockedFees = 0;

    incidents.forEach((incident) => {
        switch (incident.incidentType) {
            case UNSCHEDULED_INCIDENT:
                totalUnscheduledFees += parseFloat(incident.totalChargeFee);
                break;
            case UNLOCKED_INCIDENT:
                totalUnlockedFees += parseFloat(incident.incidentPrice);
                break;
            default:
                break;
        }
    });

    const grandTotal = totalUnlockedFees + totalUnscheduledFees;

    const formattedUnscheduledFees = `$ ${totalUnscheduledFees.toFixed(2)}`;
    const formattedUnlockedFees = `$ ${totalUnlockedFees.toFixed(2)}`;
    const formattedGrandTotalFee = `$ ${grandTotal.toFixed(2)}`;

    return (
        <div>
            <h4>Member Summary for selected period</h4>
            <Loader active={loading} />
            {
                !loading &&
                    <Grid stackable>
                        <Grid.Row>
                            <Grid.Column width={3}>
                                <p>Unscheduled incidents total :</p>
                            </Grid.Column>
                            <Grid.Column width={9}>
                                <p>{formattedUnscheduledFees}</p>
                            </Grid.Column>
                        </Grid.Row>
                        <Grid.Row>
                            <Grid.Column width={3}>
                                <p>Unlocked incidents total :</p>
                            </Grid.Column>
                            <Grid.Column width={9}>
                                <p>{formattedUnlockedFees}</p>
                            </Grid.Column>
                        </Grid.Row>
                        <Grid.Row>
                            <Grid.Column width={3}>
                                <p><b>Grand Total :</b></p>
                            </Grid.Column>
                            <Grid.Column width={9}>
                                <p><b>{formattedGrandTotalFee}</b></p>
                            </Grid.Column>
                        </Grid.Row>
                    </Grid>
            }
        </div>
    );
};

export default MemberSummary;