import * as React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { IFacility } from '../models/facility.model';
import { ApplicationState } from '../store';
import { filterFacilities } from '../utils/facility.util';

import CardContainer from '../components/CardContainer';
import AppBar from '../components/AppBar';
import Sidebar from '../components/Sidebar';
import { setSelectedFacilityAction } from '../store/ui/ui.actions';
import LoadingSpinner from '../components/LoadingSpinner';
import { SearchBarState } from '../store/ui/ui.reducer';

export default () => {
    const facilities: IFacility[] = useSelector((state: ApplicationState) => state.facilities.facilities);
    const searchTerm: SearchBarState = useSelector((state: ApplicationState) => state.ui.search);
    const selectedFacilitySlug: string = useSelector((state: ApplicationState) => state.ui.selectedFacility);

    const isFetching = useSelector((state: ApplicationState) => state.facilities.isFetching);

    const dispatch = useDispatch();
    const selectFacility = (slug: string) => dispatch(setSelectedFacilityAction(slug));

    const selectedFacility = facilities.find(f => f.slug === selectedFacilitySlug);

    const [sidebarFacility, setSidebarFacility] = React.useState<IFacility>(selectedFacility);

    if ((sidebarFacility === undefined && selectedFacility !== undefined) || (selectedFacility !== undefined && sidebarFacility.slug !== selectedFacility.slug)) {
        setSidebarFacility(selectedFacility);
    }

    const closeSidebar = () => {
        selectFacility('');
    };

    const showSpinner = isFetching && (!facilities || facilities.length === 0);

    return (
        <div className={'desktop-layout-root'}>
            <AppBar />
            
            {showSpinner && <LoadingSpinner />}

            <div className={'desktop-layout-container'}>
                <div className={'desktop-layout-main-content'}>
                    <div className={'desktop-layout-card-container'}>
                        <CardContainer facilities={filterFacilities(facilities, searchTerm.searchTerm, searchTerm.campusRegion)} showFavoriteIcons={true} />
                    </div>
                </div>

                <Sidebar facility={sidebarFacility} closeSidebar={closeSidebar} isVisible={selectedFacility !== undefined} />
            </div>
        </div>
    );
};