# Copyright 2014 The Chromium Authors. All rights reserved.
# Use of this source code is governed by a BSD-style license that can be
# found in the LICENSE file.

import re


def result_contains_repaint_rects(text):
    return isinstance(text, str) and re.search(r'"paintInvalidations": \[$', text, re.MULTILINE) is not None


def extract_layer_tree(input_str):
    if not isinstance(input_str, str):
        return '{}'

    if input_str[0:2] == '{\n':
        start = 0
    else:
        start = input_str.find('\n{\n')
        if start == -1:
            return '{}'

    end = input_str.find('\n}\n', start)
    if end == -1:
        return '{}'

    # FIXME: There may be multiple layer trees in the result.
    return input_str[start:end + 3]


def generate_repaint_overlay_html(test_name, actual_text, expected_text):
    if not result_contains_repaint_rects(actual_text) and not result_contains_repaint_rects(expected_text):
        return ''

    expected_layer_tree = extract_layer_tree(expected_text)
    actual_layer_tree = extract_layer_tree(actual_text)

    return """<!DOCTYPE HTML>
<html>
<head>
<title>%(title)s</title>
<style>
    body {
        margin: 0;
        padding: 0;
    }
    iframe {
      position: absolute;
      top: 80px;
      left: 0;
      border: 0;
      z-index: -1;
    }
    canvas {
      position: absolute;
      top: 80px;
      left: 0;
      z-index: 1;
    }
    #actual {
      display: none;
    }
</style>
</head>
<body>
<label><input id="show-test" type="checkbox" checked onchange="toggle_test(this.checked)">Show test</label>
<label><input id="use-solid-colors" type="checkbox" onchange="toggle_solid_color(this.checked)">Use solid colors</label>
<br>
<span id='type'>Expected Invalidations</span>
<div id=overlay>
    <canvas id='expected' width='2000' height='2000'></canvas>
    <canvas id='actual' width='2000' height='2000'></canvas>
</div>
<script>
var overlay_opacity = 0.25;

function toggle_test(show_test) {
    iframe.style.display = show_test ? 'block' : 'none';
}

function toggle_solid_color(use_solid_color) {
    overlay_opacity = use_solid_color ? 1 : 0.25;
    draw_repaint_rects();
}

var expected = %(expected)s;
var actual = %(actual)s;

function rectsEqual(rect1, rect2) {
    return rect1[0] == rect2[0] && rect1[1] == rect2[1] && rect1[2] == rect2[2] && rect1[3] == rect2[3];
}

function draw_rects(context, rects) {
    for (var i = 0; i < rects.length; ++i) {
        var rect = rects[i];
        context.fillRect(rect[0], rect[1], rect[2], rect[3]);
    }
}

function draw_layer_rects(context, result) {
    context.save();
    if (result.position)
        context.translate(result.position[0], result.position[1]);
    var t = result.transform;
    if (t) {
        var origin = result.transformOrigin || [result.bounds[0] / 2, result.bounds[1] / 2];
        context.translate(origin[0], origin[1]);
        context.transform(t[0][0], t[0][1], t[1][0], t[1][1], t[3][0], t[3][1]);
        context.translate(-origin[0], -origin[1]);
    }
    if (result.paintInvalidations) {
        var rects = [];
        for (var i = 0; i < result.paintInvalidations.length; ++i) {
            if (result.paintInvalidations[i].rect)
                rects.push(result.paintInvalidations[i].rect);
        }
        draw_rects(context, rects);
    }
    context.restore();
}

function draw_result_rects(context, result) {
    if (result.layers) {
        for (var i = 0; i < result.layers.length; ++i)
            draw_layer_rects(context, result.layers[i]);
    }
}

var expected_canvas = document.getElementById('expected');
var actual_canvas = document.getElementById('actual');

function draw_repaint_rects() {
    var expected_ctx = expected_canvas.getContext("2d");
    expected_ctx.clearRect(0, 0, 2000, 2000);
    expected_ctx.fillStyle = 'rgba(255, 0, 0, ' + overlay_opacity + ')';
    draw_result_rects(expected_ctx, expected);

    var actual_ctx = actual_canvas.getContext("2d");
    actual_ctx.clearRect(0, 0, 2000, 2000);
    actual_ctx.fillStyle = 'rgba(0, 255, 0, ' + overlay_opacity + ')';
    draw_result_rects(actual_ctx, actual);
}

draw_repaint_rects();

var path = decodeURIComponent(location.search).substr(1);
var iframe = document.createElement('iframe');
iframe.id = 'test-frame';
iframe.width = 800;
iframe.height = 600;
iframe.src = path;

var overlay = document.getElementById('overlay');
overlay.appendChild(iframe);

var type = document.getElementById('type');
var expected_showing = true;
function flip() {
    if (expected_showing) {
        type.textContent = 'Actual Invalidations';
        expected_canvas.style.display = 'none';
        actual_canvas.style.display = 'block';
    } else {
        type.textContent = 'Expected Invalidations';
        actual_canvas.style.display = 'none';
        expected_canvas.style.display = 'block';
    }
    expected_showing = !expected_showing
}
setInterval(flip, 3000);
</script>
</body>
</html>
""" % {
        'title': test_name,
        'expected': expected_layer_tree,
        'actual': actual_layer_tree,
    }