import { action, observable } from "mobx";
import { observer } from "mobx-react";
import * as React from "react";
import { AudioField } from "../../../../fields/URLField";
import { Upload } from "../../../../server/SharedMediaTypes";
import { ViewBoxBaseComponent } from "../../DocComponent";
import { FieldView } from "../FieldView";
import { VideoBox } from "../VideoBox";
import { RecordingView } from './RecordingView';


@observer
export class RecordingBox extends ViewBoxBaseComponent() {

      public static LayoutString(fieldKey: string) { return FieldView.LayoutString(RecordingBox, fieldKey); }

      private _ref: React.RefObject<HTMLDivElement> = React.createRef();

      constructor(props: any) {
            super(props);
      }

      @observable result: Upload.FileInformation | undefined = undefined

      @action
      setResult = (info: Upload.FileInformation) => {
            console.log("Setting result to " + info)
            this.result = info
            console.log(this.result.accessPaths.agnostic.client)
            this.props.Document[this.fieldKey] = new AudioField(this.result.accessPaths.agnostic.client);
      }

      render() {
            return <div className="recordingBox" ref={this._ref}>
                  {!this.result ? <RecordingView setResult={this.setResult} /> :
                        <p>video box</p>}
            </div>;
      }
}