import WrapIcon from 'mdi-react/WrapIcon';
import * as React from 'react';
import { fromEvent, Subject, Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
import { ActionItem } from '../../../components/ActionItem';
import { Tooltip } from '../../../components/tooltip/Tooltip';
import { eventLogger } from '../../../tracking/eventLogger';
import { WrapDisabledIcon } from '../../../util/icons'; // TODO: Switch to mdi icon
/**
 * A repository header action that toggles the line wrapping behavior for long lines in code files.
 */
export class ToggleLineWrap extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = { value: ToggleLineWrap.getValue() };
        this.updates = new Subject();
        this.subscriptions = new Subscription();
        this.onClick = () => this.updates.next(!this.state.value);
    }
    /**
     * Reports the current line wrap behavior (true means on, false means off).
     */
    static getValue() {
        return localStorage.getItem(ToggleLineWrap.STORAGE_KEY) === 'true'; // default to off
    }
    /**
     * Sets the line wrap behavior (true means on, false means off).
     */
    static setValue(value) {
        localStorage.setItem(ToggleLineWrap.STORAGE_KEY, String(value));
    }
    componentDidMount() {
        this.subscriptions.add(this.updates.subscribe(value => {
            eventLogger.log(value ? 'WrappedCode' : 'UnwrappedCode');
            ToggleLineWrap.setValue(value);
            this.setState({ value });
            this.props.onDidUpdate(value);
            Tooltip.forceUpdate();
        }));
        // Toggle when the user presses 'alt+z'.
        this.subscriptions.add(fromEvent(window, 'keydown')
            // Opt/alt+z shortcut
            .pipe(filter(event => event.altKey && event.key === 'z'))
            .subscribe(event => {
            event.preventDefault();
            this.updates.next(!this.state.value);
        }));
    }
    componentWillUnmount() {
        this.subscriptions.unsubscribe();
    }
    render() {
        return (React.createElement(ActionItem, { onSelect: this.onClick, "data-tooltip": `${this.state.value ? 'Disable' : 'Enable'} wrapping long lines (Alt+Z/Opt+Z)` }, this.state.value ? React.createElement(WrapDisabledIcon, { className: "icon-inline" }) : React.createElement(WrapIcon, { className: "icon-inline" })));
    }
}
ToggleLineWrap.STORAGE_KEY = 'wrap-code';
//# sourceMappingURL=ToggleLineWrap.js.map