import CloseIcon from 'mdi-react/CloseIcon';
import * as React from 'react';
import { fromEvent, Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
import { Resizable } from '../components/Resizable';
import { Spacer, TabBorderClassName, TabsWithLocalStorageViewStatePersistence } from '../components/Tabs';
import { eventLogger } from '../tracking/eventLogger';
import { Tree } from '../tree/Tree';
import { FormatListBulletedIcon } from '../util/icons'; // TODO: Switch to mdi icon
import { RepoRevSidebarSymbols } from './RepoRevSidebarSymbols';
/**
 * The sidebar for a specific repo revision that shows the list of files and directories.
 */
export class RepoRevSidebar extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = {
            showSidebar: localStorage.getItem(RepoRevSidebar.HIDDEN_STORAGE_KEY) === null,
        };
        this.subscriptions = new Subscription();
        this.onSidebarToggle = () => {
            if (this.state.showSidebar) {
                localStorage.setItem(RepoRevSidebar.HIDDEN_STORAGE_KEY, 'true');
            }
            else {
                localStorage.removeItem(RepoRevSidebar.HIDDEN_STORAGE_KEY);
            }
            this.setState(state => ({ showSidebar: !state.showSidebar }));
        };
        this.onSelectTab = (tab) => {
            if (tab === 'symbols') {
                eventLogger.log('SidebarSymbolsTabSelected');
            }
            else if (tab === 'files') {
                eventLogger.log('SidebarFilesTabSelected');
            }
            else if (tab === 'history') {
                eventLogger.log('SidebarHistoryTabSelected');
            }
        };
    }
    componentDidMount() {
        // Toggle sidebar visibility when the user presses 'alt+s'.
        this.subscriptions.add(fromEvent(window, 'keydown')
            .pipe(filter(event => event.altKey && event.key === 's'))
            .subscribe(event => {
            event.preventDefault();
            this.setState(prevState => ({ showSidebar: !prevState.showSidebar }));
        }));
    }
    componentWillUnmount() {
        this.subscriptions.unsubscribe();
    }
    render() {
        if (!this.state.showSidebar) {
            return (React.createElement("button", { type: "button", className: `btn btn-icon repo-rev-sidebar-toggle ${this.props.className}-toggle`, onClick: this.onSidebarToggle, "data-tooltip": "Show sidebar (Alt+S/Opt+S)" },
                React.createElement(FormatListBulletedIcon, null)));
        }
        return (React.createElement(Resizable, { className: "repo-rev-container__sidebar-resizable", handlePosition: "right", storageKey: "repo-rev-sidebar", defaultSize: 256 /* px */, element: React.createElement(TabsWithLocalStorageViewStatePersistence, { tabs: RepoRevSidebar.TABS, storageKey: RepoRevSidebar.LAST_TAB_STORAGE_KEY, tabBarEndFragment: React.createElement(React.Fragment, null,
                    React.createElement(Spacer, null),
                    React.createElement("button", { onClick: this.onSidebarToggle, className: `btn btn-icon tab_bar__close-button ${TabBorderClassName}`, title: "Close sidebar (Alt+S/Opt+S)" },
                        React.createElement(CloseIcon, { className: "icon-inline" }))), id: "explorer", className: `repo-rev-sidebar ${this.props.className} ${this.state.showSidebar ? `repo-rev-sidebar--open ${this.props.className}--open` : ''}`, tabClassName: "tab-bar__tab--h5like", onSelectTab: this.onSelectTab },
                React.createElement(Tree, { key: "files", repoPath: this.props.repoPath, rev: this.props.rev, commitID: this.props.commitID, history: this.props.history, location: this.props.location, scrollRootSelector: "#explorer", activePath: this.props.filePath, activePathIsDir: this.props.isDir }),
                React.createElement(RepoRevSidebarSymbols, { key: "symbols", repoID: this.props.repoID, rev: this.props.rev, history: this.props.history, location: this.props.location })) }));
    }
}
RepoRevSidebar.LAST_TAB_STORAGE_KEY = 'repo-rev-sidebar-last-tab';
RepoRevSidebar.HIDDEN_STORAGE_KEY = 'repo-rev-sidebar-hidden';
RepoRevSidebar.TABS = [{ id: 'files', label: 'Files' }, { id: 'symbols', label: 'Symbols' }];
//# sourceMappingURL=RepoRevSidebar.js.map