"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var fa_1 = require("react-icons/lib/fa");
var recompose_1 = require("recompose");
var styled_components_1 = require("styled-components");
var asRendition_1 = require("../asRendition");
var theme_1 = require("../theme");
var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tposition: relative;\n\twidth: 100%;\n\tborder-bottom: 1px solid ", ";\n\tpadding-left: 24px;\n\tpadding-top: 3px;\n\n\t.search-icon {\n\t\tcolor: ", ";\n\t\tfont-size: 0.9em;\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 4px;\n\t\ttransform: translateY(-50%);\n\t}\n\tinput {\n\t\toutline: none;\n\t\tbackground: transparent;\n\t\tbox-shadow: none;\n\t\tborder: none;\n\t\twidth: 100%;\n\t\tfont-size: inherit;\n\t\tpadding: 5px 5px 8px;\n\t\theight: auto;\n\t\t&:hover {\n\t\t\tbox-shadow: none;\n\t\t}\n\t\t::placeholder {\n\t\t\tcolor: ", ";\n\t\t\tfont-weight: 300;\n\t\t}\n\t}\n"], ["\n\tposition: relative;\n\twidth: 100%;\n\tborder-bottom: 1px solid ", ";\n\tpadding-left: 24px;\n\tpadding-top: 3px;\n\n\t.search-icon {\n\t\tcolor: ", ";\n\t\tfont-size: 0.9em;\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 4px;\n\t\ttransform: translateY(-50%);\n\t}\n\tinput {\n\t\toutline: none;\n\t\tbackground: transparent;\n\t\tbox-shadow: none;\n\t\tborder: none;\n\t\twidth: 100%;\n\t\tfont-size: inherit;\n\t\tpadding: 5px 5px 8px;\n\t\theight: auto;\n\t\t&:hover {\n\t\t\tbox-shadow: none;\n\t\t}\n\t\t::placeholder {\n\t\t\tcolor: ", ";\n\t\t\tfont-weight: 300;\n\t\t}\n\t}\n"])), theme_1.default.colors.gray.main, theme_1.default.colors.gray.main, theme_1.default.colors.gray.main);
var Search = function (_a) {
    var dark = _a.dark, disabled = _a.disabled, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange;
    return (React.createElement(Wrapper, null,
        React.createElement("input", { style: { color: dark ? '#fff' : undefined }, disabled: disabled, placeholder: placeholder || 'Search entries...', value: value, onChange: onChange }),
        React.createElement(fa_1.FaSearch, { className: "search-icon", name: "search" })));
};
exports.default = recompose_1.compose(styled_components_1.withTheme, asRendition_1.default)(Search);
var templateObject_1;
