import * as React from 'react';
import * as classNames from 'classnames';
import { useDispatch } from 'react-redux';
import { CampusRegion } from '../models/facility.model';
import { setSearchTermAction, setSelectedCampusRegionAction } from '../store/ui/ui.actions';
import { trackPiwikEvent } from '../piwik/piwik';
import { IconButton, Input, Paper, MenuItem, Select, FormControl } from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';
import CloseIcon from '@material-ui/icons/Close';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';

interface SearchBarProps {
    onSearchExpand: () => void;
    onSearchCollapse: () => void;
}

export default ({onSearchExpand, onSearchCollapse}: SearchBarProps) => {
    const [isFocused, setIsFocused] = React.useState<boolean>(false);
    const [isMobileOpen, setIsMobileOpen] = React.useState<boolean>(false);
    const [value, setValue] = React.useState<string>('');
    const [campus, setCampus] = React.useState<CampusRegion>(CampusRegion.Fairfax);
    const [inputElement, setInputElement] = React.useState<HTMLInputElement>(null);

    const dispatch = useDispatch();
    const setSearchTerm = (term: string) => dispatch(setSearchTermAction(term));
    const setSelectedCampusRegion = (region: CampusRegion) => dispatch(setSelectedCampusRegionAction(region));

    /**
     * Handles a change in the search term.
     */
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setValue(e.target.value);

        setSearchTerm(e.target.value);
    };

    const handleRegionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        trackPiwikEvent('change-campus', e.target.value);

        const campusRegion: CampusRegion = e.target.value as CampusRegion;
        setCampus(campusRegion);

        setSelectedCampusRegion(campusRegion);
    };

    const handleFocus = () => {
        trackPiwikEvent('search-action', 'focused');

        setIsFocused(true);
    };

    const handleBlur = () => setIsFocused(false);
    

    const handleMobileExpand = () => {
        setIsMobileOpen(true);

        onSearchExpand();

        /*
            This timeout is necessary because inputElement is not displayed when execution reaches this point.
            By using setTimeout with no delay, inputElement.focus() is added to the end of the execution stack, therefore
            being executed after the input is visible.,
         */
        setTimeout(() => inputElement?.focus());
    };

    const handleMobileCollapse = () => {
        setIsMobileOpen(false);

        onSearchCollapse();
    };

    const clear = () => {
        setValue('');

        setSearchTerm('');
    };
    
    return (
        <Paper className={classNames('search-bar-paper-background', isFocused && 'search-bar-focus',
            value && 'search-bar-has-value', isMobileOpen && 'search-bar-mobile-open')}>
            <IconButton onClick={handleMobileExpand} disableRipple={true} className={'search-bar-search-btn'}>
                <SearchIcon className={'search-bar-search-icon'}/>
            </IconButton>
            
            <IconButton onClick={handleMobileCollapse} disableRipple={true} className={'search-bar-back-btn'}>
                <ArrowBackIcon className={'search-bar-back-icon'}/>
            </IconButton>

            <Input
                placeholder="Name, Location, etc."
                disableUnderline={true}
                className={classNames('search-bar-input', {
                    'hide-search-input': !isMobileOpen
                })}
                onChange={handleChange}
                onFocus={handleFocus}
                onBlur={handleBlur}
                inputProps={{
                    'aria-label': 'Search Bar'
                }}
                inputRef={(el) => setInputElement(el)}
                value={value}
            />

            <IconButton onClick={clear} disableRipple={true} className={'search-bar-close-btn'}>
                <CloseIcon/>
            </IconButton>

            <FormControl className={'search-bar-campus-control'}>
                <Select
                    disableUnderline={true}
                    value={campus}
                    onChange={handleRegionChange}>
                    <MenuItem value={CampusRegion.Fairfax}>Fairfax</MenuItem>
                    <MenuItem value={CampusRegion.Arlington}>Arlington</MenuItem>
                    <MenuItem value={CampusRegion.PrinceWilliam}>SciTech</MenuItem>
                    <MenuItem value={CampusRegion.FrontRoyal}>Front Royal</MenuItem>
                </Select>
            </FormControl>
        </Paper>
    );
};