// noinspection JSPotentiallyInvalidUsageOfThis

import {invokeCallback, mixin} from "@/common.js";
import {chart, createShape, deleteShapeId, dragging, draggingShapeIds, drawShape} from "@/charts/chart.js";


//
// Usage of Shapes:
// const shape = new Shape(ShapeType.HLine)
// shape.draw()
// shape.points
// > [{time:17228394, price:42638.83}]
//
// shape.model stores the shape-specific control points, as defined by the shape subclass, and may be a vue ref.
// Use the shape.model.* fields in components to get reactive effects with the chart, or pass an onModel callback
// to the constructor
//


export const ShapeType = {
    // this "enum" is a record of the TradingView keystrings

    /*
    The `name` field must match the user-facing name in the TradingView toolbar UI
    TradingView drawing tool codes:
    https://www.tradingview.com/charting-library-docs/latest/api/modules/Charting_Library/#supportedlinetools
    text anchored_text note anchored_note signpost double_curve arc icon emoji sticker arrow_up arrow_down arrow_left arrow_right price_label price_note arrow_marker flag vertical_line horizontal_line cross_line horizontal_ray trend_line info_line trend_angle arrow ray extended parallel_channel disjoint_angle flat_bottom anchored_vwap pitchfork schiff_pitchfork_modified schiff_pitchfork balloon comment inside_pitchfork pitchfan gannbox gannbox_square gannbox_fixed gannbox_fan fib_retracement fib_trend_ext fib_speed_resist_fan fib_timezone fib_trend_time fib_circles fib_spiral fib_speed_resist_arcs fib_channel xabcd_pattern cypher_pattern abcd_pattern callout triangle_pattern 3divers_pattern head_and_shoulders fib_wedge elliott_impulse_wave elliott_triangle_wave elliott_triple_combo elliott_correction elliott_double_combo cyclic_lines time_cycles sine_line long_position short_position forecast date_range price_range date_and_price_range bars_pattern ghost_feed projection rectangle rotated_rectangle circle ellipse triangle polyline path curve cursor dot arrow_cursor eraser measure zoom brush highlighter regression_trend fixed_range_volume_profile
    */
    Segment: {name: 'Trend Line', code: 'trend_line'},
    Ray: {name: 'Ray', code: 'ray'},
    Line: {name: 'Extended Line', code: 'extended'},
    HRay: {name: 'Horizontal Ray', code: 'horizontal_ray'},
    HLine: {name: 'Horizontal Line', code: 'horizontal_line'},
    VLine: {name: 'Vertical Line', code: 'vertical_line'},
    PriceRange: {name: 'Price Range', code: 'price_range'},
}


class Shape {
    constructor(type, model={}, onModel=null, onDelete=null) {
        // the Shape object manages synchronizing internal data with a corresponding TradingView shape
        this.id = null // TradingView shapeId, or null if no TV shape created yet (drawing mode)
        this.type = type  // ShapeType
        this.model = model  // subclass-specific
        this.points = null  // TradingView points for the given shape
        this.props = null
        if (onModel !== null)
            this.onModel = onModel
        if (onDelete !== null )
            this.onDelete = onDelete
        this.lock = 0  // used to prevent callbacks when we are the ones forcing the chart change
        this.create()
    }

    //
    // primary interface methods
    //

    draw() {
        // have the user draw this shape
        console.log(`draw ${this.type.name}`)
        if (this.id)
            throw Error(`Shape already exists ${this.id}`)
        drawShape(this.type, new ShapeTVCallbacks(this))
    }

    create() {
        if (this.id !== null) return
        // programatically create the shape using the current this.points
        const points = this.pointsFromModel()
        if( points && points.length ) {
            this.doCreate(points)
        }
    }

    doCreate(points) {
        const props = this.propsFromModel()
        createShape(this.type, points, {overrides:props}, new ShapeTVCallbacks(this))
    }

    createOrDraw() {
        if(this.id) return
        const points = this.pointsFromModel()
        if(points && points.length)
            this.doCreate(points)
        else
            this.draw()
    }


    tvShape() {
        return this.id === null ? null : chart.getShapeById(this.id);
    }


    setModel(model, props=null) {
        for( const [k,v] of Object.entries(model))
            this.model[k] = v
        this.setPoints(this.pointsFromModel());
        let p
        const mp = this.propsFromModel();
        if (props===null) {
            p = mp
            if (p===null)
                return
        }
        else if (mp !== null)
            p = mixin(props, mp)
        this.setPropsIfDirty(p)
    }


    setPoints(points) {
        if (points !== null && points.length) {
            if (this.id === null)
                this.doCreate(points)
            else {
                const s = this.tvShape();
                if (!dragging) {
                    s.setPoints(points)
                }
                else {
                    // quiet setPoints doesn't disturb tool editing mode
                    const i = s._pointsConverter.apiPointsToDataSource(points)
                    // s._model.startChangingLinetool(this._source)
                    s._model.changeLinePoints(s._source, i)
                    // s._model.endChangingLinetool(!0)
                    s._source.createServerPoints()
                }
            }
        }
    }


    setProps(props) {
        if(this.id) {
            this.tvShape().setProperties(props)
        }
    }


    setPropsIfDirty(props) {
        if( dirtyProps(this.props, props) )
            this.setProps(props)
    }


    beingDragged() {
        return draggingShapeIds.indexOf(this.id) !== -1
    }


    delete() {
        // console.log('shape.delete', this.id)
        if (this.id === null) return
        this.lock++
        try {
            deleteShapeId(this.id)
            this.id = null
        } catch (e) {
            throw e
        } finally {
            this.lock--
        }
    }


    //
    // Model synchronization
    //

    pointsFromModel() {return null}
    pointsToModel() {} // set the model using this.points
    propsFromModel() {return null}
    propsToModel() {} // set the model using this.props

    onModel(model) {} // called whenever points or props updates the model dictionary


    //
    // Overridable shape callbacks
    //

    onDraw() {}  // start drawing a new shape for the builder
    onRedraw() {}  // the mouse moved while in drawing mode
    onUndraw() {}  // drawing was canceled by clicking on a different tool
    onAddPoint() {}  // the user clicked a point while drawing (that point is added to the points list)
    onCreate(points, props) {} // the user has finished creating all the control points.  drawing mode is exited and the initial shape is created.
    onPoints(points) {} // the control points of an existing shape were changed
    onProps(props) {}  // the display properties of an existing shape were changed
    onMove(points) {} // the shape was moved by dragging a drawing element not the control point
    onDrag(points) {}
    onHide(props) {}
    onShow(props) {}
    onClick() {}  // the shape was selected
    onDelete() {}

}


// B is modifying A
function dirtyProps(propsA, propsB) {
    if (propsB===null)
        return propsA !== null
    const entries = Object.entries(propsB);
    if (propsA===null)
        return entries.length > 0
    for( const [k,v] of entries)
        if ( !(k in propsA) || propsA[k] !== v )
            return true
    return false
}


class ShapeTVCallbacks {
    // These methods are called by TradingView and provide some default handling before invoking our own Shape callbacks

    constructor(shape) {
        this.shape = shape
    }

    onCreate(shapeId, points, props) {
        if( this.shape.id )
            throw Error(`Created a shape ${shapeId} where one already existed ${this.shape.id}`)
        this.shape.id = shapeId
        if( this.shape.lock ) return
        invokeCallback(this.shape, 'onCreate', points, props)
    }

    onPoints(shapeId, points) {
        this.shape.points = points
        this.shape.onPoints(points)
        this.shape.pointsToModel()
        this.shape.onModel(this.shape.model)
    }

    onProps(shapeId, props) {
        console.log('props', shapeId, props)
        this.shape.props = props
        this.shape.onProps(props)
        this.shape.propsToModel()
        this.shape.onModel(this.shape.model)
    }

    onDraw() {
        if( this.shape.lock ) return
        invokeCallback(this.shape, 'onDraw')
    }

    onRedraw() {
        if( this.shape.lock ) return
        invokeCallback(this.shape, 'onRedraw')
    }

    onUndraw() {
        if( this.shape.lock ) return
        invokeCallback(this.shape, 'onUndraw')
    }

    onAddPoint() {
        if( this.shape.lock ) return
        invokeCallback(this.shape, 'onAddPoint')
    }

    onMove(_shapeId, points) {
        if( this.shape.lock ) return
        invokeCallback(this.shape, 'onMove',points)
    }

    onDrag(_shapeId, points) {
        if( this.shape.lock ) return
        invokeCallback(this.shape, 'onDrag', points)
    }

    onHide(_shapeId, props) {
        if( this.shape.lock ) return
        invokeCallback(this.shape, 'onHide',props)
    }

    onShow(_shapeId, props) {
        if( this.shape.lock ) return
        invokeCallback(this.shape, 'onShow',props)
    }

    onClick(_shapeId) {
        if( this.shape.lock ) return
        invokeCallback(this.shape, 'onClick')
    }

    onDelete(_shapeId, props) {
        this.shape.id = null
        if( this.shape.lock ) return
        invokeCallback(this.shape, 'onDelete',props)
    }
}


export class HLine extends Shape {
    constructor(model, onModel=null, onDelete=null) {
        super(ShapeType.HLine, model, onModel, onDelete)
    }

    pointsFromModel() {
        if (this.model.price === null) return null
        const time = this.points !== null && this.points.length > 0 ? this.points[0].time : 0
        return [{time:time, price:this.model.price}]
    }

    pointsToModel() {
        this.model.price = this.points[0].price
    }

    propsFromModel() {
        return this.model.color ? {linecolor: this.model.color} : null
    }

    propsToModel() {this.model.color=this.props.linecolor}


    onDrag(points) {
        const s = this.tvShape();
        console.log('shape', s)
        console.log('currentMovingPoint', s._source.currentMovingPoint())
        console.log('startMovingPoint', s._source.startMovingPoint())
        console.log('isBeingEdited', s._source.isBeingEdited())
        console.log('state',  s._source.state())
    }

}