var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
import { useState, useEffect, useMemo } from 'react';
import styled from 'styled-components';
import { Metric } from '@magic-circle/styles';
import { useStore } from '@magic-circle/state';
import Chart from './Chart';
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
var displayMetric = function (value, unit) {
    if (!value)
        return 'N/A';
    return "".concat(Math.round(value)).concat(unit);
};
var Sidebar = function (_a) {
    var performance = _a.performance;
    var loadTimes = useStore(performance.loadTimes);
    var fps = useStore(performance.fps);
    var renderTime = useStore(performance.renderTime);
    var memory = useStore(performance.memory);
    var _b = useState(0), width = _b[0], setWidth = _b[1];
    var _c = useState(0), height = _c[0], setHeight = _c[1];
    useEffect(function () {
        var setSize = function () {
            var frame = document.querySelector('#frame');
            if (frame) {
                setWidth(frame.clientWidth);
                setHeight(frame.clientHeight);
            }
        };
        setSize();
        window.addEventListener('resize', setSize);
        return function () {
            window.removeEventListener('resize', setSize);
        };
    }, []);
    var maxRenderTime = useMemo(function () {
        return Math.max.apply(Math, __spreadArray(__spreadArray([], renderTime, true), [20], false));
    }, [renderTime]);
    return (<Container>
      <Metric.Container>
        Frames per second
        <Metric.Value>{displayMetric(fps[fps.length - 1], 'fps')}</Metric.Value>
      </Metric.Container>
      <Chart max={60} values={fps}/>
      <Metric.Container>
        Render time
        <Metric.Value>
          {displayMetric(renderTime[renderTime.length - 1], 'ms')}
        </Metric.Value>
      </Metric.Container>
      <Chart max={maxRenderTime} values={renderTime}/>
      <Metric.Container>
        Memory
        <Metric.Value>{displayMetric(memory, 'mb')}</Metric.Value>
      </Metric.Container>
      <Metric.Container>
        First paint
        <Metric.Value>
          {loadTimes.firstPaint
            ? displayMetric(loadTimes.firstPaint, 'ms')
            : '?'}
        </Metric.Value>
      </Metric.Container>
      <Metric.Container>
        First contentful paint
        <Metric.Value>
          {loadTimes.firstContentfulPaint
            ? displayMetric(loadTimes.firstContentfulPaint, 'ms')
            : '?'}
        </Metric.Value>
      </Metric.Container>
      <Metric.Container>
        Load time
        <Metric.Value>
          {loadTimes.loadingTime
            ? displayMetric(loadTimes.loadingTime || 0, 'ms')
            : '?'}
        </Metric.Value>
      </Metric.Container>
      <Metric.Container>
        Frame width
        <Metric.Value>{displayMetric(width, 'px')}</Metric.Value>
      </Metric.Container>
      <Metric.Container>
        Frame height
        <Metric.Value>{displayMetric(height, 'px')}</Metric.Value>
      </Metric.Container>
      <Metric.Container>
        Device pixel ratio
        <Metric.Value>{window.devicePixelRatio}</Metric.Value>
      </Metric.Container>
    </Container>);
};
export default Sidebar;
var templateObject_1;