import React = require('react');
import { observer } from 'mobx-react';
import { Doc } from '../../../../fields/Doc';
import { CollectionSubView } from '../CollectionSubView';
import './CollectionSchemaView.scss';
import { SchemaRowBox } from './SchemaRowBox';
import { action, computed, observable } from 'mobx';
import { BoolCast, Cast, StrCast } from '../../../../fields/Types';
import { listSpec } from '../../../../fields/Schema';
import { SchemaColumnHeader } from './SchemaColumnHeader';
import { List } from '../../../../fields/List';
import { dropActionType } from '../../../util/DragManager';

export enum ColumnType {
    Number,
    String,
    Boolean,
    Doc,
    Image,
}

const defaultColumnKeys: string[] = ['title', 'type', 'author', 'text', 'data', 'tags'];

@observer
export class CollectionSchemaView extends CollectionSubView() {
    isChildContentActive = () => (this.props.isDocumentActive?.() && (this.props.childDocumentsActive?.() || BoolCast(this.rootDoc.childDocumentsActive)) ? true : undefined);

    @computed get layoutDoc() {
        return Doc.Layout(this.props.Document);
    }

    @computed get columnKeys() {
        return Cast(this.props.Document.columnKeys, listSpec('string'), defaultColumnKeys);
    }

    @computed get columnWidths() {
        return Cast(
            this.props.Document.columnWidths,
            listSpec('number'),
            this.columnKeys.map(() => (this.props.PanelWidth() - 100) / this.columnKeys.length)
        );
    }

    @action
    changeColumnKey = (index: number, newKey: string) => {
        let currKeys = this.columnKeys;
        currKeys[index] = newKey;
        this.layoutDoc.columnKeys = new List<string>(currKeys);
        return true;
    };

    render() {
        return (
            <div className="collectionSchemaView">
                <div className="schema-table">
                    <div className="schema-header-row">
                        {this.columnKeys.map((key, index) => (
                            <SchemaColumnHeader columnIndex={index} columnKeys={this.columnKeys} columnWidths={this.columnWidths} changeColumnKey={this.changeColumnKey} />
                        ))}
                    </div>
                    <div className="schema-table-content">
                        {this.childDocs.map((doc: Doc) => (
                            <SchemaRowBox
                                {...this.props}
                                Document={doc}
                                renderDepth={this.props.renderDepth + 1}
                                isContentActive={this.isChildContentActive}
                                rootSelected={this.rootSelected}
                                dropAction={StrCast(this.layoutDoc.childDropAction) as dropActionType}
                                docFilters={this.childDocFilters}
                                docRangeFilters={this.childDocRangeFilters}
                                searchFilterDocs={this.searchFilterDocs}
                                ContainingCollectionDoc={this.props.CollectionView?.props.Document}
                                ContainingCollectionView={this.props.CollectionView}
                                columnKeys={this.columnKeys}
                                columnWidths={this.columnWidths}
                            />
                        ))}
                    </div>
                </div>
            </div>
        );
    }
}
function DocListCast(childDocs: Doc[]): any {
    throw new Error('Function not implemented.');
}