import React from 'react';

import createReactClass from 'create-react-class';

import PropTypes from 'prop-types';

import CesiumMath from 'terriajs-cesium/Source/Core/Math';
import defined from 'terriajs-cesium/Source/Core/defined';
import Ellipsoid from 'terriajs-cesium/Source/Core/Ellipsoid';

import UserDrawing from '../../Models/UserDrawing';
import ObserveModelMixin from '../ObserveModelMixin';
import Styles from './parameter-editors.scss';

const LineParameterEditor = createReactClass({
    displayName: 'LineParameterEditor',
    mixins: [ObserveModelMixin],

    propTypes: {
        previewed: PropTypes.object,
        parameter: PropTypes.object,
        viewState: PropTypes.object
    },

    getInitialState() {
        return {
            userDrawing: new UserDrawing(
                {
                    terria: this.props.previewed.terria,
                    onPointClicked: this.onPointClicked,
                    onCleanUp: this.onCleanUp,
                    allowPolygon: false
                })
        };
    },

    onCleanUp() {
        this.props.viewState.openAddData();
    },

    setValueFromText(e) {
        LineParameterEditor.setValueFromText(e, this.props.parameter);
    },

    onPointClicked(pointEntities) {
        const pointEnts = pointEntities.entities.values;
        const pointsLongLats = [];
        for (let i=0; i < pointEnts.length; i++) {
            const currentPoint = pointEnts[i];
            const currentPointPos = currentPoint.position.getValue(this.props.previewed.terria.clock.currentTime);
            const cartographic = Ellipsoid.WGS84.cartesianToCartographic(currentPointPos);
            const points = [];
            points.push(CesiumMath.toDegrees(cartographic.longitude));
            points.push(CesiumMath.toDegrees(cartographic.latitude));
            pointsLongLats.push(points);
        }
        this.props.parameter.value = pointsLongLats;
    },

    selectLineOnMap() {
        this.state.userDrawing.enterDrawMode();
        this.props.viewState.explorerPanelIsVisible = false;
    },

    render() {
        return (
            <div>
                <input className={Styles.field}
                       type="text"
                       onChange={this.setValueFromText}
                       value={LineParameterEditor.getDisplayValue(this.props.parameter.value)}/>
                <button type="button"
                        onClick={this.selectLineOnMap}
                        className={Styles.btnSelector}>
                    Click to draw line
                </button>
            </div>
        );
    },
});

/**
 * Triggered when user types value directly into field.
 * @param {String} e Text that user has entered manually.
 * @param {FunctionParameter} parameter Parameter to set value on.
 */
LineParameterEditor.setValueFromText = function(e, parameter) {
    const coordinatePairs = e.target.value.split('], [');
    const pointsLongLats = [];
    for (let i=0; i<coordinatePairs.length; i++) {
        let coordinates = coordinatePairs[i].replace('[', '').replace(']', '');
        coordinates = coordinates.split(',');

        if (coordinates.length >= 2) {
            const points = [];
            points.push(parseFloat(coordinates[0]));
            points.push(parseFloat(coordinates[1]));
            pointsLongLats.push(points);
        }
    }
    parameter.value = pointsLongLats;
};

/**
 * Given a value, return it in human readable form for display.
 * @param {Object} value Native format of parameter value.
 * @return {String} String for display
 */
LineParameterEditor.getDisplayValue = function(value) {
    const pointsLongLats = value;
    if (!defined(pointsLongLats) || pointsLongLats.length < 1) {
        return '';
    }

    let line = '';
    for (let i = 0; i < pointsLongLats.length; i++) {
        line += '[' + pointsLongLats[i][0].toFixed(3) + ', ' + pointsLongLats[i][1].toFixed(3) + ']';
        if (i !== pointsLongLats.length - 1) {
            line += ', ';
        }
    }
    if (line.length > 0) {
        return line;
    } else {
        return '';
    }
};

module.exports = LineParameterEditor;