// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
'use strict';
import * as React from 'react';
import { Tool } from 'react-svg-pan-zoom';
import { Image, ImageName } from '../react-common/image';
import { ImageButton } from '../react-common/imageButton';
import { getLocString } from '../react-common/locReactSide';

interface IToolbarProps {
    baseTheme: string;
    changeTool(tool: Tool): void;
    prevButtonClicked?(): void;
    nextButtonClicked?(): void;
    exportButtonClicked(): void;
    copyButtonClicked(): void;
    deleteButtonClicked?(): void;
}

export class Toolbar extends React.Component<IToolbarProps> {
    constructor(props: IToolbarProps) {
        super(props);
    }

    public render() {
        return (
            <div id="plot-toolbar-panel">
                <ImageButton
                    baseTheme={this.props.baseTheme}
                    onClick={this.props.prevButtonClicked}
                    disabled={!this.props.prevButtonClicked}
                    tooltip={getLocString('DataScience.previousPlot', 'Previous')}
                >
                    <Image baseTheme={this.props.baseTheme} class="image-button-image" image={ImageName.Prev} />
                </ImageButton>
                <ImageButton
                    baseTheme={this.props.baseTheme}
                    onClick={this.props.nextButtonClicked}
                    disabled={!this.props.nextButtonClicked}
                    tooltip={getLocString('DataScience.nextPlot', 'Next')}
                >
                    <Image baseTheme={this.props.baseTheme} class="image-button-image" image={ImageName.Next} />
                </ImageButton>
                <ImageButton
                    baseTheme={this.props.baseTheme}
                    onClick={this.pan}
                    tooltip={getLocString('DataScience.panPlot', 'Pan')}
                >
                    <Image baseTheme={this.props.baseTheme} class="image-button-image" image={ImageName.Pan} />
                </ImageButton>
                <ImageButton
                    baseTheme={this.props.baseTheme}
                    onClick={this.zoomIn}
                    tooltip={getLocString('DataScience.zoomInPlot', 'Zoom in')}
                >
                    <Image baseTheme={this.props.baseTheme} class="image-button-image" image={ImageName.Zoom} />
                </ImageButton>
                <ImageButton
                    baseTheme={this.props.baseTheme}
                    onClick={this.zoomOut}
                    tooltip={getLocString('DataScience.zoomOutPlot', 'Zoom out')}
                >
                    <Image baseTheme={this.props.baseTheme} class="image-button-image" image={ImageName.ZoomOut} />
                </ImageButton>
                {/* This isn't possible until VS Code supports copying images to the clipboard. See https://github.com/microsoft/vscode/issues/217
                     <ImageButton baseTheme={this.props.baseTheme} onClick={this.props.copyButtonClicked} tooltip={getLocString('DataScience.copyPlot', 'Copy image to clipboard')}>
                        <Image baseTheme={this.props.baseTheme} class='image-button-image' image={ImageName.Copy}/>
                    </ImageButton> */}
                <ImageButton
                    baseTheme={this.props.baseTheme}
                    onClick={this.props.exportButtonClicked}
                    tooltip={getLocString('DataScience.exportPlot', 'Export to different formats.')}
                >
                    <Image baseTheme={this.props.baseTheme} class="image-button-image" image={ImageName.SaveAs} />
                </ImageButton>
                <ImageButton
                    baseTheme={this.props.baseTheme}
                    onClick={this.props.deleteButtonClicked}
                    disabled={!this.props.deleteButtonClicked}
                    tooltip={getLocString('DataScience.deletePlot', 'Remove')}
                >
                    <Image baseTheme={this.props.baseTheme} class="image-button-image" image={ImageName.Delete} />
                </ImageButton>
            </div>
        );
    }

    private pan = () => {
        this.props.changeTool('pan');
    };

    private zoomIn = () => {
        this.props.changeTool('zoom-in');
    };

    private zoomOut = () => {
        this.props.changeTool('zoom-out');
    };
}