"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var styled_components_1 = __importDefault(require("styled-components"));
var react_router_dom_1 = require("react-router-dom");
var styleConstants_1 = require("../styleConstants");
var DropdownComponent = /** @class */ (function (_super) {
    __extends(DropdownComponent, _super);
    function DropdownComponent(props) {
        var _this = _super.call(this, props) || this;
        _this.state = { open: false };
        _this.toggle = _this.toggle.bind(_this);
        _this.setWrapperRef = _this.setWrapperRef.bind(_this);
        _this.handleClickOutside = _this.handleClickOutside.bind(_this);
        return _this;
    }
    DropdownComponent.prototype.componentWillUnmount = function () {
        document.removeEventListener("mousedown", this.handleClickOutside.bind(this));
    };
    DropdownComponent.prototype.render = function () {
        var _this = this;
        return (React.createElement("div", { className: this.props.className },
            React.createElement("div", { onClick: function (ev) { return _this.toggle(); } }, this.props.target),
            this.state.open ? (React.createElement("div", { ref: function (ref) { return _this.setWrapperRef(ref); } },
                React.createElement("div", { onClick: function (ev) { return _this.toggle(); } }, this.props.children))) : null));
    };
    DropdownComponent.prototype.handleClickOutside = function (event) {
        if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
            this.toggle();
        }
    };
    DropdownComponent.prototype.setWrapperRef = function (node) {
        this.wrapperRef = node;
    };
    DropdownComponent.prototype.toggle = function () {
        var _this = this;
        if (this.state.open) {
            document.removeEventListener("mousedown", function (ev) { return _this.handleClickOutside(ev); });
        }
        else {
            document.addEventListener("mousedown", function (ev) { return _this.handleClickOutside(ev); });
        }
        this.setState({ open: !this.state.open });
    };
    return DropdownComponent;
}(React.Component));
exports.DropdownComponent = DropdownComponent;
exports.Dropdown = styled_components_1.default(DropdownComponent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  > div:first-child {\n    cursor: pointer;\n  }\n  > div:nth-child(2) {\n    font-family: ", ";\n    position: relative;\n    z-index: 100;\n\n    > div {\n      position: absolute;\n      ", ": 3px;\n      top: 10px;\n      width: 200px;\n      max-width: 200px;\n      background-color: ", ";\n      box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px, rgba(0, 0, 0, 0.2) 0px 1px 2px;\n      border: 1px solid ", ";\n      :before,\n      :after {\n        content: \" \";\n        height: 0;\n        width: 0;\n        position: absolute;\n        border: 8px solid transparent; /* arrow size */\n      }\n\n      :before {\n        border-bottom-color: white; /* arrow color */\n\n        /* positioning */\n        position: absolute;\n        top: -15px;\n        ", ": 10px;\n        z-index: 2;\n      }\n\n      :after {\n        border-bottom-color: ", "; /* arrow color */\n\n        /* positioning */\n        position: absolute;\n        top: -16px;\n        ", ": 10px;\n        z-index: 1;\n      }\n    }\n  }\n"], ["\n  > div:first-child {\n    cursor: pointer;\n  }\n  > div:nth-child(2) {\n    font-family: ", ";\n    position: relative;\n    z-index: 100;\n\n    > div {\n      position: absolute;\n      ", ": 3px;\n      top: 10px;\n      width: 200px;\n      max-width: 200px;\n      background-color: ", ";\n      box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px, rgba(0, 0, 0, 0.2) 0px 1px 2px;\n      border: 1px solid ", ";\n      :before,\n      :after {\n        content: \" \";\n        height: 0;\n        width: 0;\n        position: absolute;\n        border: 8px solid transparent; /* arrow size */\n      }\n\n      :before {\n        border-bottom-color: white; /* arrow color */\n\n        /* positioning */\n        position: absolute;\n        top: -15px;\n        ", ": 10px;\n        z-index: 2;\n      }\n\n      :after {\n        border-bottom-color: ", "; /* arrow color */\n\n        /* positioning */\n        position: absolute;\n        top: -16px;\n        ", ": 10px;\n        z-index: 1;\n      }\n    }\n  }\n"])), styleConstants_1.fonts.SANS_SERIF, function (props) { return (props.position === "left" ? "left" : "right"); }, styleConstants_1.colors.basic.WHITE, styleConstants_1.colors.accent.CIVIL_GRAY_3, function (props) { return (props.position === "left" ? "left" : "right"); }, styleConstants_1.colors.accent.CIVIL_GRAY_3, function (props) { return (props.position === "left" ? "left" : "right"); });
exports.DropdownGroup = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n\n  li:hover {\n    background-color: ", ";\n  }\n"], ["\n  border-bottom: 1px solid ", ";\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n\n  li:hover {\n    background-color: ", ";\n  }\n"])), styleConstants_1.colors.accent.CIVIL_GRAY_4, styleConstants_1.colors.accent.CIVIL_GRAY_4);
var DropdownItemComponent = function (_a) {
    var className = _a.className, children = _a.children, onClick = _a.onClick;
    return (React.createElement("li", { onClick: onClick, className: className }, children));
};
exports.DropdownItem = styled_components_1.default(DropdownItemComponent)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  text-decoration: none;\n  color: black;\n  padding: 15px;\n  a:hover {\n    background-color: ", ";\n  }\n"], ["\n  display: block;\n  text-decoration: none;\n  color: black;\n  padding: 15px;\n  a:hover {\n    background-color: ", ";\n  }\n"])), styleConstants_1.colors.accent.CIVIL_GRAY_4);
var DropdownLinkComponent = function (_a) {
    var className = _a.className, to = _a.to, children = _a.children;
    return (React.createElement("li", { className: className },
        React.createElement(react_router_dom_1.Link, { to: to }, children)));
};
exports.DropdownLink = styled_components_1.default(DropdownLinkComponent)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  a {\n    display: block;\n    text-decoration: none;\n    color: black;\n    padding: 15px;\n  }\n  a:hover {\n    background-color: ", ";\n  }\n"], ["\n  a {\n    display: block;\n    text-decoration: none;\n    color: black;\n    padding: 15px;\n  }\n  a:hover {\n    background-color: ", ";\n  }\n"])), styleConstants_1.colors.accent.CIVIL_GRAY_4);
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
//# sourceMappingURL=Dropdown.js.map