var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
import React, { useEffect, useState } from 'react';
import map from 'lodash/map';
import fill from 'lodash/fill';
import styled from '@monstrosity/utilities/themed-components';
import { getTimeAt } from '@monstrosity/utilities/get-time-at/get-time-at';
import { Hands } from './hands';
var ClockFace = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\twidth: ", "px;\n\theight: ", "px;\n    border-radius: 50%;\n\tmargin: 0;\n    position: relative;\n    box-sizing: border-box;\n\tbox-shadow: rgba(0, 0, 0, 0.14902) 5px 5px 25px;\n\tdisplay: inline-flex;\n\tbackground: ", ";\n"], ["\n\twidth: ", "px;\n\theight: ", "px;\n    border-radius: 50%;\n\tmargin: 0;\n    position: relative;\n    box-sizing: border-box;\n\tbox-shadow: rgba(0, 0, 0, 0.14902) 5px 5px 25px;\n\tdisplay: inline-flex;\n\tbackground: ", ";\n"])), function (_a) {
    var size = _a.size;
    return size || 100;
}, function (_a) {
    var size = _a.size;
    return size || 100;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.background;
});
var useTime = function (timezone) {
    var _a = __read(useState(getTimeAt(timezone)), 2), time = _a[0], setTime = _a[1];
    useEffect(function () {
        var id = setInterval(function () {
            setTime(function () { return getTimeAt(timezone); });
        }, 1000);
        return function () { return clearInterval(id); };
    }, []);
    return time;
};
var Mark = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tposition: absolute;\n\tborder-radius: 100px;\n\ttop: 0.625rem;\n\tleft: 50%;\n\ttext-align: center;\n\ttransform: translate3d(-50%, 0, 0) rotate(", ");\n\ttransform-origin: center ", "px;\n\tcolor: ", ";\n"], ["\n\tposition: absolute;\n\tborder-radius: 100px;\n\ttop: 0.625rem;\n\tleft: 50%;\n\ttext-align: center;\n\ttransform: translate3d(-50%, 0, 0) rotate(", ");\n\ttransform-origin: center ", "px;\n\tcolor: ", ";\n"])), function (_a) {
    var rotation = _a.rotation;
    return rotation || '0deg';
}, function (_a) {
    var size = _a.size;
    return ((size || 300) / 2) - 10;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.text.body;
});
var marks = fill(Array(12), undefined);
var ClockBase = function (_a) {
    var size = _a.size, timezone = _a.timezone;
    var time = useTime(timezone);
    return (React.createElement(ClockFace, { size: size },
        map(marks, function (_, i) { return (React.createElement(Mark, { key: i, rotation: i * 30 + "deg", size: size }, i === 0 ? 12 : i)); }),
        React.createElement(Hands, { time: time, borderWidth: 0, size: size })));
};
export var Clock = styled(ClockBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.15);\n  background: ", ";\n"], ["\n  position: relative;\n  box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.15);\n  background: ", ";\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.background;
});
var templateObject_1, templateObject_2, templateObject_3;
