/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
 * @module AccuDraw
 */
import "./Calculator.scss";
import classnames from "classnames";
import * as React from "react";
import { Key } from "ts-key-enum";
import { Icon, IconInput } from "@itwin/core-react";
import { Button, Input } from "@itwin/itwinui-react";
import { CalculatorEngine, CalculatorOperator } from "./CalculatorEngine.js";
import { SquareButton } from "./SquareButton.js";
import { SvgCheckmark, SvgRemove } from "@itwin/itwinui-icons-react";
import { SvgBackspace } from "../icons/SvgBackspace.js";
/** @public */
export class Calculator extends React.PureComponent {
    _mainDiv = React.createRef();
    _equalsClicked = false;
    static defaultProps = {
        engine: new CalculatorEngine(),
    };
    constructor(props) {
        super(props);
        let displayValue = "0";
        if (this.props.initialValue)
            displayValue = this.props.engine.processValue(this.props.initialValue.toString());
        this.state = {
            displayValue,
        };
    }
    _onValueButtonClick = (keyChar) => {
        const displayValue = this.props.engine.processValue(keyChar);
        this._mainDivFocus();
        this.setState({ displayValue });
    };
    _onOperatorButtonClick = (operator) => {
        if (operator === CalculatorOperator.Clear && this._equalsClicked)
            operator = CalculatorOperator.ClearAll;
        const displayValue = this.props.engine.processOperator(operator);
        this._mainDivFocus();
        this.setState({ displayValue });
        if (operator === CalculatorOperator.Equals)
            this._equalsClicked = true;
        else if (operator === CalculatorOperator.ClearAll)
            this._equalsClicked = false;
    };
    _handleOk = (_event) => {
        this._ok();
    };
    _ok() {
        if (this.props.onOk) {
            this.props.onOk(this.props.engine.result);
        }
        this._clearAll();
    }
    _handleCancel = (_event) => {
        this._cancel();
    };
    _cancel() {
        if (this.props.onCancel) {
            this.props.onCancel();
        }
        this._clearAll();
    }
    _clearAll() {
        this.props.engine.clearAll();
        this._equalsClicked = false;
    }
    componentDidMount() {
        this._mainDivFocus();
    }
    _mainDivFocus() {
        if (this._mainDiv.current)
            this._mainDiv.current.focus();
    }
    render() {
        const { className, resultIcon, onOk, onCancel, initialValue, ...props } = this.props;
        const classNames = classnames("uifw-calculator", className);
        const topSection = resultIcon ? (
        // eslint-disable-next-line @typescript-eslint/no-deprecated
        React.createElement(IconInput, { containerClassName: "uifw-calculator-top-input", value: this.state.displayValue, readOnly: true, icon: resultIcon })) : (React.createElement(Input, { value: this.state.displayValue, readOnly: true, size: "small" }));
        return (
        // The event handler is only being used to capture bubbled events
        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
        React.createElement("div", { ...props, ref: this._mainDiv, tabIndex: -1, className: classNames, onKeyDown: this._handleKeyDown },
            React.createElement("div", { className: "uifw-calculator-top" }, topSection),
            React.createElement(CalculatorKeyPad, { onValueClick: this._onValueButtonClick, onOperatorClick: this._onOperatorButtonClick }),
            React.createElement("div", { className: "uifw-calculator-bottom-buttons" },
                React.createElement(Button, { className: classnames("uifw-calculator-large-button", "uifw-calculator-ok-button"), styleType: "cta", onClick: this._handleOk },
                    React.createElement(Icon, { iconSpec: React.createElement(SvgCheckmark, null) })),
                React.createElement(Button, { className: classnames("uifw-calculator-large-button", "uifw-calculator-cancel-button"), onClick: this._handleCancel },
                    React.createElement(Icon, { iconSpec: React.createElement(SvgRemove, null) })))));
    }
    _handleKeyDown = (event) => {
        switch (event.key) {
            case "0":
            case "1":
            case "2":
            case "3":
            case "4":
            case "5":
            case "6":
            case "7":
            case "8":
            case "9":
                this._onValueButtonClick(event.key);
                break;
            case "a":
            case "A":
                this._onOperatorButtonClick(CalculatorOperator.ClearAll);
                break;
            case "c":
            case "C":
            case Key.Clear.valueOf():
                this._onOperatorButtonClick(CalculatorOperator.Clear);
                break;
            case Key.Escape.valueOf():
                this._cancel();
                break;
            case Key.Backspace.valueOf():
                this._onOperatorButtonClick(CalculatorOperator.Backspace);
                break;
            case "/":
            case Key.Divide.valueOf():
                this._onOperatorButtonClick(CalculatorOperator.Divide);
                break;
            case "*":
            case Key.Multiply.valueOf():
                this._onOperatorButtonClick(CalculatorOperator.Multiply);
                break;
            case "-":
            case Key.Subtract.valueOf():
                this._onOperatorButtonClick(CalculatorOperator.Subtract);
                break;
            case "+":
            case Key.Add.valueOf():
                this._onOperatorButtonClick(CalculatorOperator.Add);
                break;
            case ".":
            case Key.Decimal.valueOf():
                this._onOperatorButtonClick(CalculatorOperator.Decimal);
                break;
            case "=":
                this._onOperatorButtonClick(CalculatorOperator.Equals);
                break;
            case Key.Enter.valueOf():
                if (!this._equalsClicked)
                    this._onOperatorButtonClick(CalculatorOperator.Equals);
                this._ok();
                break;
        }
    };
}
class CalculatorKeyPad extends React.PureComponent {
    render() {
        return (React.createElement("div", { className: classnames("uifw-calculator-button-grid") },
            React.createElement(OperatorButton, { operator: CalculatorOperator.ClearAll, onClick: this.props.onOperatorClick }, "AC"),
            React.createElement(OperatorButton, { operator: CalculatorOperator.Clear, onClick: this.props.onOperatorClick }, "C"),
            React.createElement(OperatorButton, { operator: CalculatorOperator.Backspace, onClick: this.props.onOperatorClick },
                React.createElement("div", { className: "uifw-calculator-button-svg" },
                    React.createElement(Icon, { iconSpec: React.createElement(SvgBackspace, null) }))),
            React.createElement(OperatorButton, { operator: CalculatorOperator.Divide, onClick: this.props.onOperatorClick, className: "uifw-calculator-large-font" }, "\u00F7"),
            React.createElement(ValueButton, { keyChar: "7", onClick: this.props.onValueClick }),
            React.createElement(ValueButton, { keyChar: "8", onClick: this.props.onValueClick }),
            React.createElement(ValueButton, { keyChar: "9", onClick: this.props.onValueClick }),
            React.createElement(OperatorButton, { operator: CalculatorOperator.Multiply, onClick: this.props.onOperatorClick, className: "uifw-calculator-large-font" }, "\u00D7"),
            React.createElement(ValueButton, { keyChar: "4", onClick: this.props.onValueClick }),
            React.createElement(ValueButton, { keyChar: "5", onClick: this.props.onValueClick }),
            React.createElement(ValueButton, { keyChar: "6", onClick: this.props.onValueClick }),
            React.createElement(OperatorButton, { operator: CalculatorOperator.Subtract, onClick: this.props.onOperatorClick, className: "uifw-calculator-large-font" }, "\u2212"),
            React.createElement(ValueButton, { keyChar: "1", onClick: this.props.onValueClick }),
            React.createElement(ValueButton, { keyChar: "2", onClick: this.props.onValueClick }),
            React.createElement(ValueButton, { keyChar: "3", onClick: this.props.onValueClick }),
            React.createElement(OperatorButton, { operator: CalculatorOperator.Add, onClick: this.props.onOperatorClick, className: "uifw-calculator-large-font" }, "+"),
            React.createElement(ValueButton, { keyChar: "0", onClick: this.props.onValueClick }),
            React.createElement(OperatorButton, { operator: CalculatorOperator.NegPos, onClick: this.props.onOperatorClick, className: "uifw-calculator-large-font" }, "\u00B1"),
            React.createElement(OperatorButton, { operator: CalculatorOperator.Decimal, onClick: this.props.onOperatorClick, className: "uifw-calculator-large-font" }, "."),
            React.createElement(OperatorButton, { operator: CalculatorOperator.Equals, onClick: this.props.onOperatorClick, className: "uifw-calculator-large-font" }, "="),
            React.createElement("span", null)));
    }
}
class ValueButton extends React.PureComponent {
    _handleOnClick = (_event) => {
        this.props.onClick(this.props.keyChar);
    };
    render() {
        const { className, keyChar, onClick, ...props } = this.props;
        const itemClassNames = classnames("uifw-calculator-item", className);
        return (React.createElement(SquareButton, { ...props, className: itemClassNames, onClick: this._handleOnClick }, keyChar));
    }
}
class OperatorButton extends React.PureComponent {
    _handleOnClick = (_event) => {
        this.props.onClick(this.props.operator);
    };
    render() {
        const { className, children, operator, onClick, ...props } = this.props;
        const itemClassNames = classnames("uifw-calculator-item", className);
        return (React.createElement(SquareButton, { ...props, className: itemClassNames, onClick: this._handleOnClick }, children));
    }
}
//# sourceMappingURL=Calculator.js.map