import React = require('react');
import './SchemaCSVPopUp.scss';
import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
import { Doc } from '../../../../fields/Doc';
import { Button, Type } from 'browndash-components';
import { StrCast } from '../../../../fields/Types';
import { MarqueeView } from '../../collections/collectionFreeForm/MarqueeView';

interface SchemaCSVPopUpProps {}

@observer
export class SchemaCSVPopUp extends React.Component<SchemaCSVPopUpProps> {
    static Instance: SchemaCSVPopUp;

    @observable
    public dataVizDoc: Doc | undefined = undefined;
    @action
    public setDataVizDoc = (doc: Doc) => {
        this.dataVizDoc = doc;
    };

    @observable
    public visible: boolean = false;
    @action
    public setVisible = (vis: boolean) => {
        this.visible = vis;
    };

    public addToCollection: any | undefined;

    /**
     * Transfers the doc to the user's canvas
     */
    private transferToCanvas = () => {
        if (this.dataVizDoc) this.addToCollection?.(this.dataVizDoc);
        this.setVisible(false);
    };

    constructor(props: SchemaCSVPopUpProps) {
        super(props);
        SchemaCSVPopUp.Instance = this;
    }

    dataBox = () => {
        return (
            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                {this.heading('Schema Table as Data Visualization Doc')}
                <div className="image-content-wrapper">
                        <div className="img-wrapper">
                            <div className="img-container" style={{background: "blue"}}>
                                <img
                                    width={150} height={150} 
                                />
                            </div>
                            <div className="btn-container">
                                <Button text="Save to Canvas" onClick={() => this.transferToCanvas()} color={StrCast(Doc.UserDoc().userColor)} type={Type.TERT} />
                            </div>
                        </div>
                        {/* {this.props.children} */}

                </div>
            </div>
        );
    };

    heading = (headingText: string) => (
        <div className="summary-heading">
            <label className="summary-text">{headingText}</label>
        </div>
    );

    render() {
        return (
            <div className="summary-box" style={{ display: this.visible ? 'flex' : 'none' }}>
                {this.dataBox()}
            </div>
        );
    }
}