import { IconButton, Type } from '@dash/components';
import { action, makeObservable, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { BiMicrophone } from 'react-icons/bi';
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 (
            <IconButton
                type={Type.TERT}
                color={this._isRecording ? '#2bcaff' : SnappingManager.userVariantColor}
                tooltip="Record"
                icon={<BiMicrophone size="16px" />}
                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();
                    }
                })}
            />
        );
    }
}