"use strict";

var __extends = undefined && undefined.__extends || function () {
    var 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 function (d, b) {
        extendStatics(d, b);
        function __() {
            this.constructor = d;
        }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
}();
var __makeTemplateObject = undefined && undefined.__makeTemplateObject || function (cooked, raw) {
    if (Object.defineProperty) {
        Object.defineProperty(cooked, "raw", { value: raw });
    } else {
        cooked.raw = raw;
    }
    return cooked;
};
var __assign = undefined && undefined.__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;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Modal = require("react-modal");
var HistoryHeader_1 = require("./HistoryPopup/HistoryHeader");
var HistoryItems_1 = require("./HistoryPopup/HistoryItems");
var graphcool_styles_1 = require("graphcool-styles");
var constants_1 = require("../constants");
var Theme_1 = require("./Theme");
var cn = require("classnames");
var QueryEditor_1 = require("./Playground/QueryEditor");
var styled_1 = require("../styled");
var theme = require("styled-theming");
var HistoryPopup = /** @class */function (_super) {
    __extends(HistoryPopup, _super);
    function HistoryPopup(props) {
        var _this = _super.call(this, props) || this;
        _this.handleClickUse = function () {
            var _a = _this.state,
                searchTerm = _a.searchTerm,
                selectedFilter = _a.selectedFilter;
            // TODO refactor
            var items = _this.props.historyItems.filter(function (item) {
                return selectedFilter === 'STARRED' ? item.starred : true && (searchTerm && searchTerm.length > 0 ? item.query.toLowerCase().includes(searchTerm.toLowerCase()) : true);
            });
            var selectedItem = items[_this.state.selectedItemIndex];
            _this.props.onCreateSession(selectedItem);
            _this.props.onRequestClose();
        };
        _this.handleItemSelect = function (index) {
            _this.setState({ selectedItemIndex: index });
        };
        _this.handleSelectFilter = function (filter) {
            _this.setState({ selectedFilter: filter });
        };
        _this.handleSearch = function (term) {
            _this.setState({ searchTerm: term });
        };
        _this.state = {
            selectedFilter: 'HISTORY',
            selectedItemIndex: 0,
            searchTerm: ''
        };
        return _this;
    }
    HistoryPopup.prototype.render = function () {
        var _a = this.state,
            searchTerm = _a.searchTerm,
            selectedFilter = _a.selectedFilter;
        var localTheme = this.props.localTheme;
        var items = this.props.historyItems.filter(function (item) {
            return selectedFilter === 'STARRED' ? item.starred : true && (searchTerm && searchTerm.length > 0 ? item.query.toLowerCase().includes(searchTerm.toLowerCase()) : true);
        });
        var selectedItem = items[this.state.selectedItemIndex];
        var customModalStyle = constants_1.modalStyle;
        if (localTheme === 'light') {
            customModalStyle = __assign({}, constants_1.modalStyle, { overlay: __assign({}, constants_1.modalStyle.overlay, { backgroundColor: 'rgba(255,255,255,0.9)' }) });
        }
        return React.createElement(
            Modal,
            { isOpen: this.props.isOpen, onRequestClose: this.props.onRequestClose, contentLabel: "GraphiQL Session History", style: customModalStyle },
            React.createElement(
                Wrapper,
                { className: localTheme },
                React.createElement(
                    Left,
                    null,
                    React.createElement(HistoryHeader_1.default, { onSelectFilter: this.handleSelectFilter, selectedFilter: this.state.selectedFilter, onSearch: this.handleSearch }),
                    React.createElement(HistoryItems_1.default, { items: items, selectedItemIndex: this.state.selectedItemIndex, searchTerm: this.state.searchTerm, onItemSelect: this.handleItemSelect, onItemStarToggled: this.props.onItemStarToggled })
                ),
                Boolean(selectedItem) ? React.createElement(
                    Right,
                    null,
                    React.createElement(
                        RightHeader,
                        null,
                        React.createElement(View, null),
                        React.createElement(
                            Use,
                            { onClick: this.handleClickUse },
                            React.createElement(
                                UseText,
                                null,
                                "Use"
                            ),
                            React.createElement(graphcool_styles_1.Icon, { src: require('../assets/icons/arrowRight.svg'), color: "white", stroke: true, width: 13, height: 13 })
                        )
                    ),
                    React.createElement(
                        Big,
                        { className: cn({
                                'docs-graphiql': localTheme === 'light'
                            }) },
                        React.createElement(
                            GraphiqlWrapper,
                            { className: cn({
                                    'graphiql-wrapper': localTheme === 'light'
                                }) },
                            React.createElement(
                                "div",
                                { className: "graphiql-container" },
                                React.createElement(
                                    "div",
                                    { className: "queryWrap" },
                                    React.createElement(QueryEditor_1.QueryEditor, { value: selectedItem.query })
                                )
                            )
                        )
                    )
                ) : React.createElement(
                    Right,
                    null,
                    React.createElement(
                        RightEmpty,
                        null,
                        React.createElement(
                            RightEmptyText,
                            null,
                            "No History yet"
                        )
                    )
                )
            )
        );
    };
    return HistoryPopup;
}(React.Component);
exports.default = Theme_1.withTheme(HistoryPopup);
/*
.left {
  @p: .flex1, .bgWhite;
}
.right {
  @p: .z2;
  flex: 0 0 464px;
}
.right-header {
  @p: .justifyBetween, .flex, .bgDarkBlue, .itemsCenter, .ph25;

  padding-top: 20px;
  padding-bottom: 20px;
}
.right-header.light {
  background-color: #f6f7f7;
}
.right-empty {
  @p: .bgDarkBlue, .h100, .flex, .justifyCenter, .itemsCenter;
}
.right-empty.light {
  background-color: #f6f7f7;
}
.right-empty-text {
  @p: .f16, .white60;
}
.view {
  @p: .f14, .white40, .ttu, .fw6;
}
.use {
  @p: .f14, .fw6, .pv10, .ph16, .bgGreen, .flex, .br2, .itemsCenter,
    .pointer;
}
.use-text {
  @p: .mr6, .white;
}
.graphiql-wrapper {
  @p: .w100, .h100, .relative, .flex, .flexAuto;
}
.big {
  @p: .h100, .flex, .flexAuto;
}
*/
var Wrapper = styled_1.styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  min-height: 500px;\n\n  & .graphiql-container.graphiql-container {\n    height: calc(100% - 81px) !important;\n\n    & .queryWrap.queryWrap {\n      border-top: none;\n    }\n  }\n"], ["\n  display: flex;\n  min-height: 500px;\n\n  & .graphiql-container.graphiql-container {\n    height: calc(100% - 81px) !important;\n\n    & .queryWrap.queryWrap {\n      border-top: none;\n    }\n  }\n"])));
var Left = styled_1.styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n\n  background: white;\n"], ["\n  flex: 1;\n\n  background: white;\n"])));
var Right = styled_1.styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 0 0 464px;\n  z-index: 2;\n"], ["\n  flex: 0 0 464px;\n  z-index: 2;\n"])));
var rightBackgroundColor = theme('mode', {
    light: '#f6f7f7',
    dark: function dark(p) {
        return p.theme.colours.darkBlue;
    }
});
var RightHeader = styled_1.styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: 20px;\n  padding-bottom: 20px;\n\n  background: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: 20px;\n  padding-bottom: 20px;\n\n  background: ", ";\n"])), function (p) {
    return p.theme.sizes.medium25;
}, function (p) {
    return p.theme.sizes.medium25;
}, rightBackgroundColor);
var RightEmpty = styled_1.styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  background: ", ";\n"], ["\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  background: ", ";\n"])), rightBackgroundColor);
var color = theme('mode', {
    dark: function dark(p) {
        return p.theme.colours.white60;
    },
    light: function light(p) {
        return p.theme.colours.darkBlue60;
    }
});
var RightEmptyText = styled_1.styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: 16px;\n  color: ", ";\n"], ["\n  font-size: 16px;\n  color: ", ";\n"])), color);
var View = styled_1.styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.4);\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.4);\n"])), function (p) {
    return p.theme.sizes.fontSmall;
}, function (p) {
    return p.theme.sizes.fontSemiBold;
});
var Use = styled_1.styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n\n  font-size: ", ";\n  font-weight: ", ";\n\n  border-radius: ", ";\n  background: ", ";\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n\n  font-size: ", ";\n  font-weight: ", ";\n\n  border-radius: ", ";\n  background: ", ";\n  cursor: pointer;\n"])), function (p) {
    return p.theme.sizes.small10;
}, function (p) {
    return p.theme.sizes.small10;
}, function (p) {
    return p.theme.sizes.small16;
}, function (p) {
    return p.theme.sizes.small16;
}, function (p) {
    return p.theme.sizes.fontSmall;
}, function (p) {
    return p.theme.sizes.fontSemiBold;
}, function (p) {
    return p.theme.sizes.smallRadius;
}, function (p) {
    return p.theme.colours.green;
});
var UseText = styled_1.styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  margin-right: ", ";\n  color: white;\n"], ["\n  margin-right: ", ";\n  color: white;\n"])), function (p) {
    return p.theme.sizes.small6;
});
var Big = styled_1.styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  height: 100%;\n  display: flex;\n  flex: 1 1 auto;\n"], ["\n  height: 100%;\n  display: flex;\n  flex: 1 1 auto;\n"])));
var GraphiqlWrapper = Big.extend(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: relative;\n  display: flex;\n  flex: 1 1 auto;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: relative;\n  display: flex;\n  flex: 1 1 auto;\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
//# sourceMappingURL=HistoryPopup.jsx.map