import * as React from 'react';
import { ViewBoxBaseComponent } from '../../DocComponent';
import { FieldView, FieldViewProps } from '../FieldView';
import { MapBoxContainer } from '../MapboxMapBox/MapboxContainer';
import { Docs } from '../../../documents/Documents';
import { DocumentType } from '../../../documents/DocumentTypes';

/**
 * Map Pushpin doc class
 */
export class MapPushpinBox extends ViewBoxBaseComponent<FieldViewProps>() {
    public static LayoutString(fieldKey: string) {
        return FieldView.LayoutString(MapPushpinBox, fieldKey);
    }
    componentDidMount() {
        this.mapBoxView.addPushpin(this.Document);
    }
    componentWillUnmount() {
        this.mapBoxView.deletePushpin(this.Document);
    }

    get mapBoxView() {
        return this.DocumentView?.()?.containerViewPath?.().lastElement()?.ComponentView as MapBoxContainer;
    }
    get mapBox() {
        return this.DocumentView?.().containerViewPath?.().lastElement()?.Document;
    }

    render() {
        return <div />;
    }
}

Docs.Prototypes.TemplateMap.set(DocumentType.PUSHPIN, {
    layout: { view: MapPushpinBox, dataField: 'data' },
    options: { acl: '' },
});
