import { makeObservable } from 'mobx';
import * as React from 'react';
import { Docs } from '../../../documents/Documents';
import { DocumentType } from '../../../documents/DocumentTypes';
import { ViewBoxAnnotatableComponent } from '../../DocComponent';
import { FieldView, FieldViewProps } from '../FieldView';
import { FormattedTextBox, FormattedTextBoxProps } from './FormattedTextBox';

export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>() {
    public static LayoutString(fieldStr: string) {
        return FieldView.LayoutString(DailyJournal, fieldStr);
    }

    constructor(props: FormattedTextBoxProps) {
        super(props);
        makeObservable(this);
    }

    render() {
        return (
            <div
                style={{
                    // background: 'beige',
                    width: '100%',
                    height: '100%',
                    backgroundColor: 'beige',
                    backgroundImage: `
                    repeating-linear-gradient(
                        to bottom, 
                        rgba(255, 26, 26, 0.2) 0px, rgba(255, 26, 26, 0.2) 1px,  /* Thin red stripes */
                        transparent 1px, transparent 20px
                    )
                `,
                    backgroundSize: '100% 20px',
                    backgroundRepeat: 'repeat',
                }}>
                <FormattedTextBox {...this._props} fieldKey={'text'} Document={this.Document} TemplateDataDocument={undefined} />
            </div>
        );
    }
}

Docs.Prototypes.TemplateMap.set(DocumentType.JOURNAL, {
    layout: { view: DailyJournal, dataField: 'text' },
    options: {
        acl: '',
        _height: 35,
        _xMargin: 10,
        _yMargin: 10,
        _layout_autoHeight: true,
        _layout_nativeDimEditable: true,
        _layout_reflowVertical: true,
        _layout_reflowHorizontal: true,
        defaultDoubleClick: 'ignore',
        systemIcon: 'BsFileEarmarkTextFill',
    },
});