import { makeObservable } from 'mobx';
import * as React from 'react';
import { ViewBoxAnnotatableComponent } from '../../DocComponent';
import { FieldView, FieldViewProps } from '../FieldView';
import { Docs } from '../../../documents/Documents';
import { DocumentType } from '../../../documents/DocumentTypes';
import { action, observable } from 'mobx';
import { DocListCast } from '../../../../fields/Doc';
import { Doc } from '../../../../fields/Doc';
import { DocumentView } from '../DocumentView';
import { FormattedTextBox } from '../formattedText/FormattedTextBox';
import { List } from '../../../../fields/List';
// Scrapbook view: a container that lays out its child items in a grid/template
export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
    @observable createdDate: string;

    constructor(props: FieldViewProps) {
        super(props);
        makeObservable(this);
        this.createdDate = this.getFormattedDate();
  
        // ensure we always have a List<Doc> in dataDoc['items']
        if (!this.dataDoc[this.fieldKey]) {
            this.dataDoc[this.fieldKey] = new List<Doc>();
        }
        this.createdDate = this.getFormattedDate();
        this.setTitle();
    }

    public static LayoutString(fieldStr: string) {
        return FieldView.LayoutString(ScrapbookBox, fieldStr);
    }


    
    
     
    

    getFormattedDate(): string {
        return new Date().toLocaleDateString(undefined, {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
        });
    }

    @action
    setTitle() {
        const title = `Scrapbook - ${this.createdDate}`;
        if (this.dataDoc.title !== title) {
            this.dataDoc.title = title;
        }
    }

    componentDidMount() {
        this.setTitle();
        if (!this.dataDoc[this.fieldKey]) {
            this.dataDoc[this.fieldKey] = new List<Doc>();
        }
    }

    render() {
        // cast into an array even if empty
        const items: Doc[] = DocListCast(this.dataDoc[this.fieldKey]);
    
        return (
            <div style={{ background: 'beige', width: '100%', height: '100%' }}>
                        
            </div>
        
        //   <div
        //     style={{
        //     }}
        //   >
        //     {items.length === 0
        //       ? <div style={{color:'#888',fontStyle:'italic'}}>Drop docs here</div>
        //       : items.map((childDoc, idx) => (
        //           <DocumentView
        //             key={String(childDoc.id ?? idx)}
        //             {...this._props}
        //             Document={childDoc}
        //           />
        //         ))
        //     }
        //   </div>
        );
      }
}


// Register scrapbook
Docs.Prototypes.TemplateMap.set(DocumentType.SCRAPBOOK, {
    layout: { view: ScrapbookBox, dataField: 'items' },
    options: {
        acl: '',
        _height: 200,
        _xMargin: 10,
        _yMargin: 10,
        _layout_autoHeight: true,
        _layout_reflowVertical: true,
        _layout_reflowHorizontal: true,
        defaultDoubleClick: 'ignore',
        systemIcon: 'BsImages',
    },
});