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() {
        console.log('setDailyText() called...');
        const placeholderText = 'Start writing here...';
        const initialText = `Journal Entry - ${this.journalDate}\n${placeholderText}`;

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

        const styles = {
            bold: true, // Make the journal date bold
            color: 'blue', // Set the journal date color to blue
            fontSize: 18, // Set the font size to 18px for the whole text
        };

        console.log('Setting new text field with:', initialText);
        this.dataDoc[this.fieldKey] = RichTextField.textToRtf(
            initialText,
            undefined, // No image DocId
            styles, // Pass the styles object here
            placeholderText.length // The position for text selection
        );

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