/** @odoo-module **/

import { registry } from "@web/core/registry";
import { _lt } from "@web/core/l10n/translation";
import { standardFieldProps } from "@web/views/fields/standard_field_props";
import { useInputField } from "@web/views/fields/input_field_hook";
import { FileUploader } from "@web/views/fields/file_handler";
import { session } from "@web/session";
import { useService } from "@web/core/utils/hooks";
import { isBinarySize } from "@web/core/utils/binary";
import { download } from "@web/core/network/download";
import utils from 'web.utils';

import core from 'web.core';
import rpc from 'web.rpc';

var QWeb = core.qweb;

import { Component, onWillUpdateProps, useState, useRef, useEffect } from "@odoo/owl";

export class StepViewer extends Component {
   setup() {
        this.notification = useService("notification");
        this.state = useState({
            fileName: this.props.record.data[this.props.fileNameField] || "",
        });
        onWillUpdateProps((nextProps) => {
            if (nextProps.readonly) {
                this.state.fileName = nextProps.record.data[nextProps.fileNameField] || "";
            }
        });

        this.show_template = useRef('showStepViewer')
        useInputField({
             getValue: () => this.props.value || ""
        });

        useEffect(
            (el) => {
                if (!el) {
                    return;
                }
                return this.formatTemplate($(el));
            },
            () => [this.show_template.el],
        )
    }

    formatTemplate($el) {
        console.log($el)
        var self=this;
        if (this.props.readonly && this.props.value) {
            var url = "/owl_demo/static/src/js/3d_viewer/test.glb";
//            var session = this.getSession();
//            if (this.props.value) {
//                if (utils.is_bin_size(this.props.value)) {
//                    url = session.url("/web/content", {
//                        model: this.model,
//                        id: JSON.stringify(this.props.record.res_id),
//                        field: this.props.record.name,
//                    });
//                } else {
//                    url = "data:model/gltf-binary;base64," + this.propsvalue.value;
//                }
//            }
            return $el.html(QWeb.render("owl_demo.StepViewer",{'url':url}))

        }
    }

    get fileName() {
        return this.state.fileName || this.props.value || "";
    }


    update({ data, name }) {
        this.state.fileName = name || "";
        const { fileNameField, record } = this.props;
        const changes = { [this.props.name]: data || false };
        if (fileNameField in record.fields && record.data[fileNameField] !== name) {
            changes[fileNameField] = name || false;
        }
        return this.props.record.update(changes);
    }

    async onFileDownload() {
        await download({
            data: {
                model: this.props.record.resModel,
                id: this.props.record.resId,
                field: this.props.name,
                filename_field: this.fileName,
                filename: this.fileName || "",
                download: true,
                data: isBinarySize(this.props.value) ? null : this.props.value,
            },
            url: "/web/content",
        });
    }

}

StepViewer.template = "owl_demo.BinaryField3d";

StepViewer.displayName = _lt("3D File");
StepViewer.supportedTypes = ["binary"];

StepViewer.components = {
    FileUploader,
};
StepViewer.props = {
    ...standardFieldProps,
    acceptedFileExtensions: { type: String, optional: true },
    fileNameField: { type: String, optional: true },
};
StepViewer.defaultProps = {
    acceptedFileExtensions: "*.stp",
};

StepViewer.extractProps = ({ attrs }) => {
    return {
        acceptedFileExtensions: attrs.options.accepted_file_extensions,
        fileNameField: attrs.filename,
    };
};

registry.category("fields").add("Viewer3D", StepViewer);
