var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import React from 'react';
import styled, { css } from '@monstrosity/utilities/themed-components';
var BaseHandStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tposition: absolute;\n\tbox-sizing: border-box;\n\tbackground: ", ";\n\tleft: 50%;\n\tborder-radius: 6.25rem;\n"], ["\n\tposition: absolute;\n\tbox-sizing: border-box;\n\tbackground: ", ";\n\tleft: 50%;\n\tborder-radius: 6.25rem;\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.highlight;
});
var getHandHeight = function (borderWidth, offset, size) {
    var clockSize = size || 300;
    var faceSize = (clockSize / 2) - offset;
    return faceSize - borderWidth;
};
var SecondHand = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\twidth: 1px;\n\theight: ", "px;\n\ttop: 0.625rem;\n\ttransform: rotate(", ")\n\ttranslate3d(-50%, 0, 0);\n\ttransform-origin: 0px bottom;\n\n\t", "\n\tbackground: ", ";\n"], ["\n\twidth: 1px;\n\theight: ", "px;\n\ttop: 0.625rem;\n\ttransform: rotate(", ")\n\ttranslate3d(-50%, 0, 0);\n\ttransform-origin: 0px bottom;\n\n\t", "\n\tbackground: ", ";\n"])), function (_a) {
    var borderWidth = _a.borderWidth, size = _a.size;
    return getHandHeight(borderWidth, 10, size);
}, function (_a) {
    var rotation = _a.rotation;
    return rotation || '30deg';
}, BaseHandStyle, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.constrast;
});
var MinuteHand = styled.div.attrs(function (_a) {
    var borderWidth = _a.borderWidth, size = _a.size, rotation = _a.rotation;
    return ({
        'style': {
            'height': getHandHeight(borderWidth, 50, size) + "px",
            'transfrom': "rotate(" + (rotation || '30deg') + ") translate3d(-50%, 0, 0)",
        },
    });
})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\twidth: 3px;\n\tborder-radius: 100px;\n\ttop: 50px;\n\ttransform-origin: 0px bottom;\n\t", "\n"], ["\n\twidth: 3px;\n\tborder-radius: 100px;\n\ttop: 50px;\n\ttransform-origin: 0px bottom;\n\t", "\n"])), BaseHandStyle);
var HourHand = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\twidth: 5px;\n\theight: ", "px;\n\ttop: 70px;\n\ttransform: rotate(", ")\n\ttranslate3d(-50%, 0, 0);\n\ttransform-origin: 0px bottom;\n\n\t", "\n"], ["\n\twidth: 5px;\n\theight: ", "px;\n\ttop: 70px;\n\ttransform: rotate(", ")\n\ttranslate3d(-50%, 0, 0);\n\ttransform-origin: 0px bottom;\n\n\t", "\n"])), function (_a) {
    var borderWidth = _a.borderWidth, size = _a.size;
    return getHandHeight(borderWidth, 70, size);
}, function (_a) {
    var rotation = _a.rotation;
    return rotation || '30deg';
}, BaseHandStyle);
var Dot = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\ttop: 50%;\n\ttransform: translate3d(-50%, -50%, 0);\n\tbox-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);\n\twidth: 10px;\n\theight: 10px;\n\tbox-sizing: border-box;\n    display: block;\n\n\t", "\n"], ["\n\ttop: 50%;\n\ttransform: translate3d(-50%, -50%, 0);\n\tbox-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);\n\twidth: 10px;\n\theight: 10px;\n\tbox-sizing: border-box;\n    display: block;\n\n\t", "\n"])), BaseHandStyle);
var AmPm = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\ttop: 50%;\n\ttransform: translate3d(-50%, -50%, 0);\n\tbox-sizing: border-box;\n    display: block;\n\twidth: 2rem;\n\theight: 1rem;\n\n\t", "\n\tbackground: transparent;\n\tcolor: ", ";\n\tleft: 75%;\n"], ["\n\ttop: 50%;\n\ttransform: translate3d(-50%, -50%, 0);\n\tbox-sizing: border-box;\n    display: block;\n\twidth: 2rem;\n\theight: 1rem;\n\n\t", "\n\tbackground: transparent;\n\tcolor: ", ";\n\tleft: 75%;\n"])), BaseHandStyle, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.highlight;
});
export var Hands = function (_a) {
    var time = _a.time, size = _a.size, _b = _a.borderWidth, borderWidth = _b === void 0 ? 10 : _b;
    var hours = time.getHours();
    var isAm = hours !== 0 && hours <= 12;
    return (React.createElement("div", null,
        React.createElement(SecondHand, { borderWidth: borderWidth, rotation: time.getSeconds() * 6 + 'deg', size: size }),
        React.createElement(MinuteHand, { borderWidth: borderWidth, rotation: (time.getMinutes() + time.getSeconds() / 60) * 6 + 'deg', size: size }),
        React.createElement(HourHand, { borderWidth: borderWidth, rotation: ((time.getHours() % 12) + time.getMinutes() / 60) * 30 + 'deg', size: size }),
        React.createElement(Dot, { borderWidth: borderWidth }),
        React.createElement(AmPm, null, isAm ? 'AM' : 'PM')));
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
