import { action, observable, makeObservable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Docs } from '../../documents/Documents';
import { DocumentType } from '../../documents/DocumentTypes';
import { FieldView } from './FieldView';
import { DateField } from '../../../fields/DateField';
import { Doc } from '../../../fields/Doc';

import './TaskManagerTask.scss';

interface TaskManagerProps {
    Document: Doc;
}

@observer
export class TaskManagerTask extends React.Component<TaskManagerProps> {
    public static LayoutString(fieldStr: string) {
        return FieldView.LayoutString(TaskManagerTask, fieldStr);
    }

    @action
    updateText = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        this.props.Document.text = e.target.value;
    };

    @action
    updateTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
        this.props.Document.title = e.target.value;
    };

    @action
    updateAllDay = (e: React.ChangeEvent<HTMLInputElement>) => {
        this.props.Document.allDay = e.target.checked;

        if (e.target.checked) {
            delete this.props.Document.startTime;
            delete this.props.Document.endTime;
        }
    };

    @action
    updateStart = (e: React.ChangeEvent<HTMLInputElement>) => {
        this.props.Document.startTime = new DateField(new Date(e.target.value));
    };

    @action
    updateEnd = (e: React.ChangeEvent<HTMLInputElement>) => {
        this.props.Document.endTime = new DateField(new Date(e.target.value));
    };

    @observable
    completed = false;

    @action
    toggleComplete = (e: React.ChangeEvent<HTMLInputElement>) => {
        this.completed = e.target.checked;
    };

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

    render() {
        const doc = this.props.Document;

        const taskDesc = typeof doc.text === 'string' ? doc.text : '';
        const taskTitle = typeof doc.title === 'string' ? doc.title : '';
        const allDay = !!doc.allDay;

        const startTime = doc.startTime instanceof DateField ? doc.startTime.date.toISOString().slice(0, 16) : '';
        const endTime = doc.endTime instanceof DateField ? doc.endTime.date.toISOString().slice(0, 16) : '';

        return (
            <div className="task-manager-container">
                <input
                    className="task-manager-title"
                    type="text"
                    placeholder="Task Title"
                    value={taskTitle}
                    onChange={this.updateTitle}
                    disabled={this.completed}
                    style={{opacity: this.completed ? 0.7 : 1,}}
                />

                <textarea
                className="task-manager-description"
                placeholder="What’s your task?"
                value={taskDesc}
                onChange={this.updateText}
                disabled={this.completed}
                style={{opacity: this.completed ? 0.7 : 1,}}
                />

                <div className="task-manager-checkboxes">

                    <label className="task-manager-allday" style={{opacity: this.completed ? 0.7 : 1,}}>
                        <input 
                            type="checkbox" 
                            checked={allDay} 
                            onChange={this.updateAllDay} 
                            disabled={this.completed}
                        />
                        All day
                    </label>

                    <label className="task-manager-complete">
                        <input type="checkbox" checked={this.completed} onChange={this.toggleComplete} />
                        Complete
                    </label>

                </div>

                <div
                    className="task-manager-times"
                    style={{ visibility: allDay ? 'hidden' : 'visible', opacity: this.completed ? 0.7 : 1}}
                >
                    <label>
                        Start:
                        <input type="datetime-local" value={startTime} onChange={this.updateStart} disabled={this.completed}/>
                    </label>
                    <label>
                        End:
                        <input type="datetime-local" value={endTime} onChange={this.updateEnd} disabled={this.completed} />
                    </label>
                </div>
            </div>
        );
    }
}

Docs.Prototypes.TemplateMap.set(DocumentType.TASK, {
    layout: { view: TaskManagerTask, 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: 'BsCheckSquare', // or whatever icon you like
    },
});