import React from "react";
import { Alert, Col, Row } from "reactstrap";
import {
    IActivitySearchForm,
    IAuditableActivity
} from "../../../shared/models/Activity";
import Translate from "./../../../translate/Translate";
import IAsyncStateContainer from "../../../shared/types/IAsyncStateContainer";
import AsyncState from "../../../shared/enumerations/AsyncState";
import ActivityTable from "../activity-table/ActivityTable";
import IPagedResponse from "../../../shared/types/IPagedResponse";
import PagedContentControls from "../../paged-content-controls/PagedContentControls";

export interface IActivityAuditLogProps {
    activityContainer: IAsyncStateContainer<IPagedResponse<IAuditableActivity>>;
    getNextPage: () => void;
    getPrevPage: () => void;
    changeSort: (sort: string) => void;
    form: IActivitySearchForm;
}

const ActivityAuditLogTranslate =
    Translate.Get.components.activity.activityAuditLog;

const ActivityAuditLog: React.FC<IActivityAuditLogProps> = (props) => {
    const changeSort = (headerName: string) => {
        if (props.changeSort) {
            props.changeSort(headerName);
        }
    };

    return (
        <div className="d-flex flex-row justify-content-center alight-items-center">
            <div>
                <Alert
                    color="warning"
                    hidden={
                        props.activityContainer.state !== AsyncState.Loading
                    }
                >
                    <p className="m-0">
                        {ActivityAuditLogTranslate.loadingMessage}
                    </p>
                </Alert>
                <Alert
                    color="danger"
                    hidden={
                        props.activityContainer.state !== AsyncState.Failure
                    }
                >
                    <p className="m-0">
                        {ActivityAuditLogTranslate.errorMessage}
                    </p>
                </Alert>
                <div className="d-flex flex-row justify-content-center align-items-center">
                    <PagedContentControls
                        nextPage={() => props.getNextPage()}
                        prevPage={() => props.getPrevPage()}
                        pagedResponse={props.activityContainer.data}
                    />
                </div>
                <ActivityTable
                    activities={props.activityContainer.data?.items ?? []}
                    changeSort={changeSort}
                    sortBy={props.form.sortBy}
                    sortDescending={props.form.sortDescending}
                />
                <div className="d-flex flex-row justify-content-center align-items-center">
                    <PagedContentControls
                        nextPage={() => props.getNextPage()}
                        prevPage={() => props.getPrevPage()}
                        pagedResponse={props.activityContainer.data}
                    />
                </div>
            </div>
        </div>
    );
};

export default ActivityAuditLog;