"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LogSearchBar = LogSearchBar;

var _solid = require("@heroicons/react/solid");

var _react = _interopRequireDefault(require("react"));

var _reactHookForm = require("react-hook-form");

var _Dropdown = require("../Dropdown");

var _TimeRange = require("../Dropdown/TimeRange");

var _TextInput = require("../TextInput");

var _jsxRuntime = require("react/jsx-runtime");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function LogSearchBar(_ref) {
  var control = _ref.control;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "flex flex-row items-center justify-between mb-4",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
      className: "text-xl font-semibold",
      children: "Logs"
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "flex items-center",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
        control: control,
        name: "timeRange",
        className: "w-44",
        items: _TimeRange.timeRanges
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "ml-4 w-72 relative rounded-md shadow-sm",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_solid.SearchIcon, {
            className: "h-5 w-5 text-gray-400",
            "aria-hidden": "true"
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
          control: control,
          name: "searchQuery",
          render: function render(_ref2) {
            var field = _ref2.field;
            var onChange = field.onChange,
                value = field.value;
            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.TextInput, {
              placeholder: "Search",
              className: "pl-10 pb-2.5 w-full",
              style: {
                height: "38px"
              },
              id: "searchQuery",
              onChange: onChange,
              value: value
            });
          }
        })]
      })]
    })]
  });
}