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

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 (
            <Toggle
                // className={`dictation-button ${this._isRecording ? 'recording' : ''}`}
                // title="Record"
                tooltip={`Dictation: ${this._isRecording ? 'on' : 'off'}`}
                icon={
                    <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>
                }
                color={SnappingManager.userVariantColor}
                toggleType={ToggleType.BUTTON}
                toggleStatus={this._isRecording}
                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();
                    }
                })}
            />
        );
    }
}