import { action, observable } from "mobx";
import { observer } from "mobx-react";
import * as React from "react";
import { VideoField } from "../../../../fields/URLField";
import { Upload } from "../../../../server/SharedMediaTypes";
import { ViewBoxBaseComponent } from "../../DocComponent";
import { FieldView } from "../FieldView";
import { VideoBox } from "../VideoBox";
import { RecordingView } from './RecordingView';
import { DocumentType } from "../../../documents/DocumentTypes";
import { Presentation } from "../../../util/TrackMovements";
import { Doc } from "../../../../fields/Doc";
import { Id } from "../../../../fields/FieldSymbols";


@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);
      }

      componentDidMount() {
            Doc.SetNativeWidth(this.dataDoc, 1280);
            Doc.SetNativeHeight(this.dataDoc, 720);
      }

      @observable result: Upload.AccessPathInfo | undefined = undefined
      @observable videoDuration: number | undefined = undefined

      @action
      setVideoDuration = (duration: number) => {
            this.videoDuration = duration
      }

      @action
      setResult = (info: Upload.AccessPathInfo, presentation?: Presentation) => {
            this.result = info
            this.dataDoc.type = DocumentType.VID;
            this.dataDoc[this.fieldKey + "-duration"] = this.videoDuration;

            this.dataDoc.layout = VideoBox.LayoutString(this.fieldKey);
            this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.client);
            this.dataDoc[this.fieldKey + "-recorded"] = true;
            // stringify the presentation and store it
            presentation?.movements && (this.dataDoc[this.fieldKey + "-presentation"] = JSON.stringify(presentation));
      }

      render() {
            return <div className="recordingBox" ref={this._ref}>
                  {!this.result && <RecordingView setResult={this.setResult} setDuration={this.setVideoDuration} id={this.rootDoc.proto?.[Id] || ''} />}
            </div>;
      }
}