var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
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 __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import React from 'react';
import map from 'lodash/map';
import filter from 'lodash/filter';
import forEach from 'lodash/forEach';
import find from 'lodash/find';
import styled from '@monstrosity/utilities/themed-components';
import { TabFlow } from '@monstrosity/enums/tab-index';
import { noOutlineOnAll } from '@monstrosity/utilities/common-styles/no-outline';
import { CursorDirection } from '@monstrosity/enums/cursor-direction';
import { getCursorPosition } from '@monstrosity/utilities/cursor-movement/cursor-movement';
import { Clickable } from '../../primitives/Clickable/clickable';
var CollectionRoot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), noOutlineOnAll);
var CollectionItem = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  ", "\n  transition: background-color 300ms;\n\n\t&:hover {\n\t\t", "\n\t}\n"], ["\n  ", "\n  ", "\n  transition: background-color 300ms;\n\n\t&:hover {\n\t\t", "\n\t}\n"])), function (_a) {
    var activeStyle = _a.activeStyle, isActive = _a.isActive;
    return isActive ? activeStyle : '';
}, function (_a) {
    var selectedStyle = _a.selectedStyle, isSelected = _a.isSelected;
    return isSelected ? selectedStyle : '';
}, function (_a) {
    var activeStyle = _a.activeStyle;
    return activeStyle;
});
export var CollectionDivider = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\twidth: ", ";\n\topacity: 0.3;\n\theight: 1px;\n\tbackground: ", ";\n\tmargin: 0.25rem 0 0.25rem ", ";\n"], ["\n\twidth: ", ";\n\topacity: 0.3;\n\theight: 1px;\n\tbackground: ", ";\n\tmargin: 0.25rem 0 0.25rem ", ";\n"])), function (_a) {
    var full = _a.full;
    return full ? '100%' : '80%';
}, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.backset;
}, function (_a) {
    var full = _a.full;
    return full ? '0' : '10%';
});
function isClickable(props) {
    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
    // @ts-ignore
    if (props.onClick)
        return true;
    return false;
}
function isDivider(props) {
    if (props.content)
        return true;
    return false;
}
var Collection = /** @class */ (function (_super) {
    __extends(Collection, _super);
    function Collection(props) {
        var _this = _super.call(this, props) || this;
        _this.idMap = {};
        _this.cursorMap = {};
        _this.mapClickable = function (props) {
            var _a = _this.props, activeStyle = _a.activeStyle, selectedStyle = _a.selectedStyle, selectedId = _a.selectedId;
            var cursor = _this.state.cursor;
            var itemIndex = _this.idMap[props.id] + 1;
            return (React.createElement(CollectionItem, { key: props.id, isActive: itemIndex === cursor, isSelected: props.id === selectedId, activeStyle: activeStyle, selectedStyle: selectedStyle },
                React.createElement(Clickable, __assign({}, props))));
        };
        _this.mapDivider = function (props, idx) {
            return React.createElement("div", { key: "div-" + idx }, props.content);
        };
        _this.onKeyDown = function (e) {
            /* Make this a util method */
            var options = _this.props.options;
            var cursor = _this.state.cursor;
            var newCursor = cursor;
            if (e.key === 'ArrowDown')
                newCursor = getCursorPosition(CursorDirection.Down, cursor, options.length);
            if (e.key === 'ArrowUp')
                newCursor = getCursorPosition(CursorDirection.Up, cursor, options.length);
            if (e.key === 'Escape')
                newCursor = 0;
            if (e.key === 'Enter') {
                var buttonId_1 = _this.cursorMap[cursor];
                var button = find(options, function (option) { return isClickable(option) && option.id === buttonId_1; });
                if (button && isClickable(button))
                    button.onClick(buttonId_1);
                return;
            }
            _this.setState({
                'cursor': newCursor,
            });
        };
        _this.state = {
            'cursor': 0,
        };
        var clickableChildren = filter(props.options, function (child) { return isClickable(child); });
        var idMap = map(clickableChildren, function (_a, index) {
            var id = _a.id;
            return ({ id: id, index: index });
        });
        forEach(idMap, function (item) {
            _this.idMap[item.id.toString()] = item.index;
        });
        forEach(idMap, function (item) {
            _this.cursorMap[item.index + 1] = item.id;
        });
        return _this;
    }
    Collection.prototype.render = function () {
        var _this = this;
        var _a = this.props, options = _a.options, header = _a.header, footer = _a.footer;
        return (React.createElement(CollectionRoot, { onKeyDown: this.onKeyDown, tabIndex: TabFlow.Enabled },
            header,
            map(options, function (child, idx) {
                if (isClickable(child))
                    return _this.mapClickable(child);
                if (isDivider(child))
                    return _this.mapDivider(child, idx);
                return React.createElement(React.Fragment, null);
            }),
            footer));
    };
    return Collection;
}(React.Component));
export { Collection };
;
var templateObject_1, templateObject_2, templateObject_3;
