import { action, makeObservable, observable } from 'mobx';
import * as React from 'react';
import { RichTextField } from '../../../../fields/RichTextField';
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>() {
    @observable journalDate: string;

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

    constructor(props: FormattedTextBoxProps) {
        super(props);
        makeObservable(this);
        this.journalDate = this.getFormattedDate();

        console.log('Constructor: Setting initial title and text...');
        this.setDailyTitle();
        this.setDailyText();
    }

    getFormattedDate(): string {
        const date = new Date().toLocaleDateString(undefined, {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric',
        });
        console.log('getFormattedDate():', date);
        return date;
    }

    @action
    setDailyTitle() {
        console.log('setDailyTitle() called...');
        console.log('Current title before update:', this.dataDoc.title);

        if (!this.dataDoc.title || this.dataDoc.title !== this.journalDate) {
            console.log('Updating title to:', this.journalDate);
            this.dataDoc.title = this.journalDate;
        }

        console.log('New title after update:', this.dataDoc.title);
    }

    @action
    setDailyText() {
        const placeholderText = 'Start writing here...';
        const dateText = `${this.journalDate}\n`;

        console.log('Checking if dataDoc has text field...');

        this.dataDoc[this.fieldKey] = RichTextField.textToRtfFormat(
            [
                { text: 'Journal Entry:', styles: { bold: true, color: 'black', fontSize: 20 } },
                { text: dateText, styles: { italic: true, color: 'gray', fontSize: 15 } },
                { text: placeholderText, styles: { fontSize: 14, color: 'gray' } },
            ],
            undefined,
            placeholderText.length - 2
        );

        console.log('Current text field:', this.dataDoc[this.fieldKey]);
    }

    componentDidMount(): void {
        console.log('componentDidMount() triggered...');
        // bcz: This should be moved into Docs.Create.DailyJournalDocument()
        // otherwise, it will override all the text whenever the note is reloaded
        this.setDailyTitle();
        this.setDailyText();
    }

    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',
    },
});
