import React, { useEffect } from "react";
import { queryGoals } from "../../../actions/GoalActions";
import { IAppState } from "../../../store/Store";
import { useDispatch, useSelector } from "react-redux";
import { IGoalState } from "../../../reducers/GoalReducer";
import AsyncState from "../../../shared/enumerations/AsyncState";
import GoalTable from "../../../components/goal/GoalTable";
import { IPersonnelGoalsInput } from "../../../shared/models/Goal";
import { IMonthRange } from "../../../shared/types/IMonthRange";

export interface IPersonnelGoalsDetailProps {
    input: IPersonnelGoalsInput;
}

const PersonnelGoalsDetail: React.FC<IPersonnelGoalsDetailProps> = (props) => {
    const dispatch = useDispatch();

    const goalState = useSelector<IAppState, IGoalState>(
        (state) => state.goalState
    );
    const departmentGoals = goalState.userGoals;

    useEffect(() => {
        const range: IMonthRange = {
            fromMonth: props.input.month,
            fromYear: props.input.year,
            toMonth: props.input.month,
            toYear: props.input.year
        };
        const includePersonnel = true;
        dispatch(queryGoals(range, includePersonnel, props.input.departmentId));
    }, []);

    return departmentGoals.state == AsyncState.Success &&
        departmentGoals.data ? (
        <GoalTable goals={departmentGoals.data} />
    ) : (
        <div>Please Wait.... </div>
    );
};

export default PersonnelGoalsDetail;