// Currently, the dashed / dotted implementation only supports a single colour +
        // single width, as that's currently required and supported on Android.
        //
        // Supporting individual widths + colours on each side is possible by modifying
        // the current implementation. The idea is that we will draw four different lines
        // and clip appropriately for each side (might require adjustment of phase so that
        // they line up but even browsers don't do a good job at that).
        //
        // Firstly, create two paths for the outer and inner paths. The inner path is
        // generated exactly the same way as the outer, just given an inset rect, derived
        // from the insets on each side. Then clip using the odd-even rule
        // (CGContextEOClip()). This will give us a nice rounded (possibly) clip mask.
        //
        // +----------------------------------+
        // |@@@@@@@@  Clipped Space  @@@@@@@@@|
        // |@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@|
        // |@@+----------------------+@@@@@@@@|
        // |@@|                      |@@@@@@@@|
        // |@@|                      |@@@@@@@@|
        // |@@|                      |@@@@@@@@|
        // |@@+----------------------+@@@@@@@@|
        // |@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@|
        // +----------------------------------+
        //
        // Afterwards, we create a clip path for each border side (CGContextSaveGState()
        // and CGContextRestoreGState() when drawing each side). The clip mask for each
        // segment is a trapezoid connecting corresponding edges of the inner and outer
        // rects. For example, in the case of the top edge, the points would be:
        // - (MinX(outer), MinY(outer))
        // - (MaxX(outer), MinY(outer))
        // - (MinX(inner) + topLeftRadius, MinY(inner) + topLeftRadius)
        // - (MaxX(inner) - topRightRadius, MinY(inner) + topRightRadius)
        //
        //         +------------------+
        //         |\                /|
        //         | \              / |
        //         |  \    top     /  |
        //         |   \          /   |
        //         |    \        /    |
        //         |     +------+     |
        //         |     |      |     |
        //         |     |      |     |
        //         |     |      |     |
        //         |left |      |right|
        //         |     |      |     |
        //         |     |      |     |
        //         |     +------+     |
        //         |    /        \    |
        //         |   /          \   |
        //         |  /            \  |
        //         | /    bottom    \ |
        //         |/                \|
        //         +------------------+
        //
        //
        // Note that this approach will produce discontinous colour changes at the edge
        // (which is okay). The reason is that Quartz does not currently support drawing
        // of gradients _along_ a path (NB: clipping a path and drawing a linear gradient
        // is _not_ equivalent).


        /*static void RCTGetDashedOrDottedBorderImage(uint borderStyle,
         *                                                                       RCTCornerRadii cornerRadii,
         *                                                                       CGSize viewSize,
         *                                                                       UIEdgeInsets borderInsets,
         *                                                                       RCTBorderColors borderColors,
         *                                                                       uint backgroundColor,
         *                                                                       bool drawToEdge)
         * {
         *      // to be implement
         * }*/


        /// this is the API supported for RN parent image view invoke
        void RCTGetBorderImage(RCTBorderStyle borderStyle,
                               CGSize viewSize,
                               RCTCornerRadii cornerRadii,
                               UIEdgeInsets borderInsets,
                               RCTBorderColors borderColors,
                               //uint backgroundColor,
                               Color backgroundColor,
                               bool drawToEdge)
        {
            Log.Info(ReactConstants.Tag, "[RCTGetBorderImage] ReactBorderDrawingManager::RCTGetBorderImage BGN ");
            Log.Info(ReactConstants.Tag, "[RCTGetBorderImage] ReactBorderDrawingManager , borderStyle:" + borderStyle);

            switch (borderStyle)
            {
            case RCTBorderStyle.RCTBorderStyleSolid:
                //return RCTGetSolidBorderImage(cornerRadii, viewSize, borderInsets, borderColors, backgroundColor, drawToEdge);
                RCTGetSolidBorderImage(cornerRadii, viewSize, borderInsets, borderColors, backgroundColor, drawToEdge);
                break;

            case RCTBorderStyle.RCTBorderStyleDashed:
            case RCTBorderStyle.RCTBorderStyleDotted:
                //return RCTGetDashedOrDottedBorderImage(borderStyle, cornerRadii, viewSize, borderInsets, borderColors, backgroundColor, drawToEdge);
                break;

            case RCTBorderStyle.RCTBorderStyleUnset:
                break;

            default:
                break;
            }

            //return null;
        }
 bool RCTCornerRadiiAreEqual(RCTCornerRadii cornerRadii)
 {
     return
         (Math.Abs(cornerRadii.topLeft - cornerRadii.topRight) < RCTViewBorderThreshold &&
          Math.Abs(cornerRadii.topLeft - cornerRadii.bottomLeft) < RCTViewBorderThreshold &&
          Math.Abs(cornerRadii.topLeft - cornerRadii.bottomRight) < RCTViewBorderThreshold);
 }
 static bool RCTCornerRadiiAreAboveThreshold(RCTCornerRadii cornerRadii)
 {
     return(cornerRadii.topLeft > RCTViewBorderThreshold ||
            cornerRadii.topRight > RCTViewBorderThreshold ||
            cornerRadii.bottomLeft > RCTViewBorderThreshold ||
            cornerRadii.bottomRight > RCTViewBorderThreshold);
 }
        void RCTPathCreateOuterOutline(bool drawToEdge, CGRect rect, RCTCornerRadii cornerRadii)
        {
            if (drawToEdge)
            {
                Log.Info(ReactConstants.Tag, "[RCTPathCreateOuterOutline] ReactBorderDrawingManager , cairo:" + cairo);
                Log.Info(ReactConstants.Tag, "[RCTPathCreateOuterOutline] rect.origin.x:" + rect.origin.x + ", rect.origin.y:" + rect.origin.y + ", rect.size.width:" + rect.size.width + ", rect.size.height:" + rect.size.height);

                // add a new rectangle path here in cairo context
                Cairo.cairo_rectangle(cairo, rect.origin.x, rect.origin.y, rect.size.width, rect.size.height);

                pathOuter = Cairo.cairo_copy_path(cairo);
                //Cairo.cairo_stroke(cairo);

                return;
            }

            //RCTPathCreateWithRoundedRect(rect, RCTGetCornerInsets(cornerRadii, new UIEdgeInsets(0,0,0,0)));
            pathOuter = RCTPathCreateWithRoundedRect(rect, RCTGetCornerInsets(cornerRadii, new UIEdgeInsets(0, 0, 0, 0)));
        }
        static RCTCornerInsets RCTGetCornerInsets(RCTCornerRadii cornerRadii,
                                                  UIEdgeInsets edgeInsets)
        {
            // calculate the corner rect inset
            RCTCornerInsets cornerInsets;

            cornerInsets.topLeft.width  = Math.Max(0, cornerRadii.topLeft - edgeInsets.left);
            cornerInsets.topLeft.height = Math.Max(0, cornerRadii.topLeft - edgeInsets.top);

            cornerInsets.topRight.width  = Math.Max(0, cornerRadii.topRight - edgeInsets.right);
            cornerInsets.topRight.height = Math.Max(0, cornerRadii.topRight - edgeInsets.top);

            cornerInsets.bottomLeft.width  = Math.Max(0, cornerRadii.bottomLeft - edgeInsets.left);
            cornerInsets.bottomLeft.height = Math.Max(0, cornerRadii.bottomLeft - edgeInsets.bottom);

            cornerInsets.bottomRight.width  = Math.Max(0, cornerRadii.bottomRight - edgeInsets.right);
            cornerInsets.bottomRight.height = Math.Max(0, cornerRadii.bottomRight - edgeInsets.bottom);


            return(cornerInsets);
        }
        void RCTGetSolidBorderImage(RCTCornerRadii cornerRadii,
                                    CGSize viewSize,
                                    UIEdgeInsets borderInsets,
                                    RCTBorderColors borderColors,
                                    //uint backgroundColor,
                                    Color backgroundColor,
                                    bool drawToEdge)
        {
            bool            hasCornerRadii = RCTCornerRadiiAreAboveThreshold(cornerRadii);
            RCTCornerInsets cornerInsets   = RCTGetCornerInsets(cornerRadii, borderInsets);

            Log.Info(ReactConstants.Tag, "[RCTGetSolidBorderImage] ReactBorderDrawingManager::RCTGetSolidBorderImage BGN ");
            Log.Info(ReactConstants.Tag, "[RCTGetSolidBorderImage] ReactBorderDrawingManager , hasCornerRadii:" + hasCornerRadii);

            bool makeStretchable =
                (borderInsets.left + cornerInsets.topLeft.width +
                 borderInsets.right + cornerInsets.bottomRight.width <= viewSize.width) &&
                (borderInsets.left + cornerInsets.bottomLeft.width +
                 borderInsets.right + cornerInsets.topRight.width <= viewSize.width) &&
                (borderInsets.top + cornerInsets.topLeft.height +
                 borderInsets.bottom + cornerInsets.bottomRight.height <= viewSize.height) &&
                (borderInsets.top + cornerInsets.topRight.height +
                 borderInsets.bottom + cornerInsets.bottomLeft.height <= viewSize.height);


            UIEdgeInsets edgeInsets = new UIEdgeInsets
                                      (
                borderInsets.top + Math.Max(cornerInsets.topLeft.height, cornerInsets.topRight.height),
                borderInsets.left + Math.Max(cornerInsets.topLeft.width, cornerInsets.bottomLeft.width),
                borderInsets.bottom + Math.Max(cornerInsets.bottomLeft.height, cornerInsets.bottomRight.height),
                borderInsets.right + Math.Max(cornerInsets.bottomRight.width, cornerInsets.topRight.width)
                                      );

            makeStretchable = false;
            Log.Info(ReactConstants.Tag, "[RCTGetSolidBorderImage] ReactBorderDrawingManager , makeStretchable:" + makeStretchable);

            CGSize sizeStretch = new CGSize
                                 (
                // 1pt for the middle stretchable area along each axis
                edgeInsets.left + 1 + edgeInsets.right,
                edgeInsets.top + 1 + edgeInsets.bottom
                                 );
            //CGSize size = makeStretchable ?  sizeStretch: viewSize;
            CGSize size = viewSize;

            // begin libCairo engine drawing context
            RCTUIGraphicsBeginImageContext(size, backgroundColor, hasCornerRadii, drawToEdge);


            CGRect rect = new CGRect((new CGPoint(0, 0)), size);

            RCTPathCreateOuterOutline(drawToEdge, rect, cornerRadii);


            Log.Info(ReactConstants.Tag, "[RCTGetSolidBorderImage] ReactBorderDrawingManager , backgroundColor.IsDefault:" + backgroundColor.IsDefault);
            if (!backgroundColor.IsDefault)
            {
                //  paint the background color here
                Log.Info(ReactConstants.Tag, "[RCTGetSolidBorderImage] ReactBorderDrawingManager::Fill the background Color! ");
                RCTContextSetFillColorWithColor(cairo, backgroundColor);
                //RCTContextSetFillColorWithUint(cairo, backgroundColor);

                Cairo.cairo_fill(cairo);
            }


            // for Cairo instead, draw rounded Rectangle path here
            Cairo.cairo_append_path(cairo, pathOuter);
            pathInner = RCTPathCreateWithRoundedRect(UIEdgeInsetsInsetRect(rect, borderInsets), cornerInsets);
            //Cairo.cairo_append_path(cairo, pathInner);

            /// Clip the outerpath with inner path  by eod rule..
            Cairo.cairo_set_fill_rule(cairo, Cairo.cairo_fill_rule_t.CAIRO_FILL_RULE_EVEN_ODD);
            //Cairo.cairo_set_fill_rule(cairo, Cairo.cairo_fill_rule_t.CAIRO_FILL_RULE_WINDING);
            Cairo.cairo_clip(cairo);

            RCTContextSetFillColorWithUint(cairo, borderColors.left);
            Cairo.cairo_paint(cairo);


            bool hasEqualColors = RCTBorderColorsAreEqual(borderColors);

            Log.Info(ReactConstants.Tag, "[RCTGetSolidBorderImage] drawToEdge:" + drawToEdge + ", hasCornerRadii:" + hasCornerRadii + ", hasEqualColors:" + hasEqualColors);
            if ((drawToEdge || !hasCornerRadii) && hasEqualColors)
            {
                Log.Info(ReactConstants.Tag, "[RCTGetSolidBorderImage] rect.origin.x:" + rect.origin.x + ", rect.origin.y:" + rect.origin.y + ", rect.size.width:" + rect.size.width + ", rect.size.height:" + rect.size.height);

                RCTContextSetFillColorWithUint(cairo, borderColors.left);
                Cairo.cairo_paint(cairo);
            }
            else
            {
                if ((hasCornerRadii))
                {
                    Log.Info(ReactConstants.Tag, "[RCTGetSolidBorderImage] ReactBorderDrawingManager-->not support different color for rounded rectangle! ");
                    RCTContextSaveCurrentImage();
                    return;
                }

                CGPoint topLeft = new CGPoint(borderInsets.left, borderInsets.top);
                if (cornerInsets.topLeft.width > 0 && cornerInsets.topLeft.height > 0)
                {
                    CGPoint[] points = new CGPoint[2];
                    CGRect    tl     = new CGRect
                                       (
                        topLeft, new CGSize(2 * cornerInsets.topLeft.width, 2 * cornerInsets.topLeft.height)
                                       );
                    RCTEllipseGetIntersectionsWithLine(tl, CGPointZero, topLeft, points);
                    if (!Single.IsNaN(points[1].x) && !Single.IsNaN(points[1].y))
                    {
                        topLeft = points[1];
                    }
                }


                CGPoint bottomLeft = new CGPoint(borderInsets.left, size.height - borderInsets.bottom);
                if (cornerInsets.bottomLeft.width > 0 && cornerInsets.bottomLeft.height > 0)
                {
                    CGPoint[] points = new CGPoint[2];
                    CGRect    bl     = new CGRect
                                       (
                        new CGPoint(bottomLeft.x, bottomLeft.y - 2 * cornerInsets.bottomLeft.height),
                        new CGSize(2 * cornerInsets.bottomLeft.width, 2 * cornerInsets.bottomLeft.height)
                                       );
                    CGPoint ble = new CGPoint(0, size.height);
                    RCTEllipseGetIntersectionsWithLine(bl, ble, bottomLeft, points);
                    if (!Single.IsNaN(points[1].x) && !Single.IsNaN(points[1].y))
                    {
                        bottomLeft = points[1];
                    }
                }


                CGPoint topRight = new CGPoint(size.width - borderInsets.right, borderInsets.top);
                if (cornerInsets.topRight.width > 0 && cornerInsets.topRight.height > 0)
                {
                    CGPoint[] points = new CGPoint[2];
                    CGRect    tr     = new CGRect
                                       (
                        new CGPoint(topRight.x - 2 * cornerInsets.topRight.width, topRight.y),
                        new CGSize(2 * cornerInsets.topRight.width, 2 * cornerInsets.topRight.height)
                                       );
                    CGPoint tre = new CGPoint(size.width, 0);
                    RCTEllipseGetIntersectionsWithLine(tr, tre, topRight, points);
                    if (!Single.IsNaN(points[0].x) && !Single.IsNaN(points[0].y))
                    {
                        topRight = points[0];
                    }
                }


                CGPoint bottomRight = new CGPoint(size.width - borderInsets.right, size.height - borderInsets.bottom);
                if (cornerInsets.bottomRight.width > 0 && cornerInsets.bottomRight.height > 0)
                {
                    CGPoint[] points = new CGPoint[2];
                    CGRect    br     = new CGRect
                                       (
                        new CGPoint(bottomRight.x - 2 * cornerInsets.bottomRight.width, bottomRight.y - 2 * cornerInsets.bottomRight.height),
                        new CGSize(2 * cornerInsets.bottomRight.width, 2 * cornerInsets.bottomRight.height)
                                       );
                    CGPoint bre = new CGPoint(size.width, size.height);
                    RCTEllipseGetIntersectionsWithLine(br, bre, bottomRight, points);
                    if (!Single.IsNaN(points[0].x) && !Single.IsNaN(points[0].y))
                    {
                        bottomRight = points[0];
                    }
                }

                Log.Info(ReactConstants.Tag, "[RCTGetSolidBorderImage] ReactBorderDrawingManager::RCTGetSolidBorderImage BGN Draw each colored Edge!");
                Log.Info(ReactConstants.Tag, "[RCTGetSolidBorderImage] borderInsets.right:" + borderInsets.right + ", borderInsets.bottom:" + borderInsets.bottom + ", borderInsets.left:" + borderInsets.left + ", borderInsets.top:" + borderInsets.top);

                uint currentColor = 0;
                //Cairo.cairo_set_fill_rule(cairo, Cairo.cairo_fill_rule_t.CAIRO_FILL_RULE_WINDING);

                // RIGHT
                if (borderInsets.right > 0)
                {
                    CGPoint[] points =
                    {
                        new CGPoint(size.width,           0),
                        topRight,
                        bottomRight,
                        new CGPoint(size.width, size.height),
                    };

                    currentColor = borderColors.right;
                    RCTContextAddLines(cairo, points, 4);
                }


                // BOTTOM
                if (borderInsets.bottom > 0)
                {
                    CGPoint[] points =
                    {
                        new CGPoint(0,          size.height),
                        bottomLeft,
                        bottomRight,
                        new CGPoint(size.width, size.height),
                    };


                    if (!(currentColor == borderColors.bottom))
                    {
                        RCTContextSetFillColorWithUint(cairo, currentColor);
                        Cairo.cairo_fill(cairo);
                        currentColor = borderColors.bottom;
                    }
                    RCTContextAddLines(cairo, points, 4);
                }


                // LEFT
                if (borderInsets.left > 0)
                {
                    CGPoint[] points =
                    {
                        CGPointZero,
                        topLeft,
                        bottomLeft,
                        new CGPoint(0,size.height),
                    };


                    if (!(currentColor == borderColors.left))
                    {
                        RCTContextSetFillColorWithUint(cairo, currentColor);
                        Cairo.cairo_fill(cairo);
                        currentColor = borderColors.left;
                    }
                    RCTContextAddLines(cairo, points, 4);
                }


                // TOP
                if (borderInsets.top > 0)
                {
                    CGPoint[] points =
                    {
                        CGPointZero,
                        topLeft,
                        topRight,
                        new CGPoint(size.width, 0),
                    };


                    if (!(currentColor == borderColors.top))
                    {
                        RCTContextSetFillColorWithUint(cairo, currentColor);
                        Cairo.cairo_fill(cairo);
                        currentColor = borderColors.top;
                    }
                    RCTContextAddLines(cairo, points, 4);
                }


                RCTContextSetFillColorWithUint(cairo, currentColor);
                Cairo.cairo_fill(cairo);
            }

            RCTContextSaveCurrentImage();

            return;
        }