import React from "react";
import { connect } from "react-redux";
import { RouteComponentProps } from "react-router";
import {getAllFactoids, setSelectedFactoidIndex} from "../../actions/FactoidActions";
import { getSelectedFactoidAccounts } from "../../selectors/FactoidSelector";
import { IFactoid } from "../../services/service-types/FactoidTypes";
import { IRepoAccount } from "../../services/service-types/RepoAccountTypes";
import AsyncState from "../../shared/enumerations/AsyncState";
import Routes from "../../shared/Routes";
import IAsyncStateContainer from "../../shared/types/IAsyncStateContainer";
import { IAppState } from "../../store/Store";
import AccountListTable from "../account-list-view/account-list-table/AccountListTable";
import "./AdminDashboard.css";
import FactoidWidgetView from "./factoid-widget-view/FactoidWidgetView";

interface IPropsFromState {
    factoids: IAsyncStateContainer<IFactoid[]>;
    selectedFactoidIndex: number;
    selectedFactoidAccounts: IRepoAccount[];
}

const mapStateToProps = (state: IAppState): IPropsFromState => {
    return {
        factoids: state.factoidState.factoids,
        selectedFactoidIndex: state.factoidState.selectedFactoidIndex,
        selectedFactoidAccounts: getSelectedFactoidAccounts(state)
    };
};

interface IPropsFromDispatch {
    getAllFactoids: () => any;
    setFactoidIndex: (index: number) => any;
}

const mapDispatchToProps: IPropsFromDispatch = {
    getAllFactoids: getAllFactoids,
    setFactoidIndex: setSelectedFactoidIndex
};

type Props = IPropsFromState & IPropsFromDispatch & RouteComponentProps;

const AdminDashBoard: React.FC<Props> = (props) => {

    const goToAccount = (account: IRepoAccount) => {
        props.history.push(Routes.Account(account.repoId));
    };

    
    const setSelectedFactoid = (index: number) => {
        props.setFactoidIndex(index);
    };
    
    const loadFactoids = () => {
        if (props.factoids.state === AsyncState.Inactive) {
            props.getAllFactoids();
        }
    };
    loadFactoids();

    return(
        <div className="main-panel">
            <div className="container dashboard-factoids">
                <FactoidWidgetView
                    factoids={props.factoids}
                    onFactoidSelected={setSelectedFactoid}
                    selectedWidgetIndex={props.selectedFactoidIndex}
                />
            </div>
            <AccountListTable
                repoAccounts={props.selectedFactoidAccounts}
                onRepoAccountClicked={goToAccount}
            />
        </div>
    );
};

export default connect<IPropsFromState, IPropsFromDispatch, {}, IAppState>(mapStateToProps, mapDispatchToProps)(AdminDashBoard);