"use strict";

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

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

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

var _io = require("react-icons/io5");

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

var _excluded = ["className", "onSubmit", "inputClassName", "inputOuterClassName", "onClear", "placeholder", "hideClearButton", "defaultValue"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function CanarySearchBar(_ref) {
  var className = _ref.className,
      onSubmit = _ref.onSubmit,
      inputClassName = _ref.inputClassName,
      inputOuterClassName = _ref.inputOuterClassName,
      onClear = _ref.onClear,
      placeholder = _ref.placeholder,
      _ref$hideClearButton = _ref.hideClearButton,
      hideClearButton = _ref$hideClearButton === void 0 ? false : _ref$hideClearButton,
      defaultValue = _ref.defaultValue,
      rest = _objectWithoutProperties(_ref, _excluded);

  var _useForm = (0, _reactHookForm.useForm)(),
      handleSubmit = _useForm.handleSubmit,
      control = _useForm.control,
      setValue = _useForm.setValue,
      watch = _useForm.watch;

  var textValue = watch("CanarySearchTextbox");
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", _objectSpread(_objectSpread({
    onSubmit: handleSubmit(function (data) {
      return onSubmit(data.CanarySearchTextbox);
    }),
    className: "flex justify-center ".concat(className)
  }, rest), {}, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "relative ".concat(inputOuterClassName),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
        name: "CanarySearchTextbox",
        control: control,
        defaultValue: defaultValue,
        rules: {
          required: true
        },
        render: function render(_ref2) {
          var field = _ref2.field;
          return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread({
            type: "text",
            className: "h-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block py-1 sm:text-sm border-gray-300 rounded-l-md ".concat(inputClassName),
            placeholder: placeholder
          }, field));
        }
      }), !hideClearButton && textValue && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "absolute inset-y-0 right-0 pr-2 flex items-center",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
          className: "p-1",
          type: "button",
          onClick: function onClick() {
            setValue("CanarySearchTextbox", "");

            if (onClear) {
              onClear();
            }
          },
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_io.IoCloseCircle, {
            className: "h-5 w-5 text-gray-400",
            "aria-hidden": "true"
          })
        })
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
      type: "submit",
      className: "py-2 px-3 border border-l-0 border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_solid.SearchIcon, {
        className: "h-4 w-4 text-gray-400",
        "aria-hidden": "true"
      })
    })]
  }));
}