import { makeObservable, observable, action } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import './DictationButton.scss';
import { DictationManager } from '../util/DictationManager';
import { SnappingManager } from '../util/SnappingManager';

export interface DictationButtonProps {
    setInput: (val: string) => void;
    inputRef?: HTMLInputElement | null | undefined;
}

@observer
export class DictationButton extends React.Component<DictationButtonProps> {
    @observable private _isRecording = false;

    constructor(props: DictationButtonProps) {
        super(props);
        makeObservable(this);
    }

    stopDictation = action(() => {
        this._isRecording = false;
        DictationManager.Controls.stop();
    });

    render() {
        return (
            <button
                className={`dictation-button ${this._isRecording ? 'recording' : ''}`}
                title="Record"
                onClick={action(() => {
                    if (!this._isRecording) {
                        this._isRecording = true;
                        DictationManager.Controls.listen({
                            interimHandler: (value: string) => {
                                this.props.setInput(value);
                                if (this.props.inputRef) {
                                    this.props.inputRef.focus();
                                    this.props.inputRef.scrollLeft = 1000000;
                                }
                            },
                            continuous: { indefinite: false },
                        }).then(results => {
                            if (results && [DictationManager.Controls.Infringed].includes(results)) {
                                DictationManager.Controls.stop();
                            }
                        });
                    } else {
                        this.stopDictation();
                    }
                })}>
                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
                    <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
                    <line x1="12" y1="19" x2="12" y2="23"></line>
                    <line x1="8" y1="23" x2="16" y2="23"></line>
                </svg>
            </button>
        );
    }
}