/* -------------------------------------------------------------------------- */
/*                                  Libraries                                 */
/* -------------------------------------------------------------------------- */
import React from "react";
import Modal from "components/containers/modal/Modal";
/* -------------------------------------------------------------------------- */
/*                                  Icons/SVG                                 */
/* -------------------------------------------------------------------------- */
import { ReactComponent as SVGSearchIcon } from "assets/svg/search.svg";
import { ReactComponent as SVGTimesIcon } from "assets/svg/times.svg";
/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */
import Button from "components/controls/Button";
/* -------------------------------------------------------------------------- */
/*                                    Hooks                                   */
/* -------------------------------------------------------------------------- */
import { useUIViewModel } from "ui/controller/uiViewModel";
import { useUIStore } from "ui/data/uiSlice";
import { Combobox } from "@headlessui/react";
import { useTranslation } from "react-i18next";
/* -------------------------------------------------------------------------- */
/*                           Global search component                          */
/* -------------------------------------------------------------------------- */
export default function GlobalSearchbar() {
  const store = useUIStore();
  const results = ["none", "nonenone"];
  const {t} = useTranslation();
  const { isSearchbarShown, hideSearchbar } = useUIViewModel(store);
  return (
    <Modal
      isOpen={isSearchbarShown}
      onClose={hideSearchbar}
      className="max-w-3xl"
    >
      <Combobox value="" onChange={() => {}}>
        <div className="flex space-x-2 -mt-3 -mx-5 items-center">
          <div className="flex-none basis-5">
            <SVGSearchIcon className="w-full h-full stroke-current" />
          </div>
          <div className="flex-grow">
            <Combobox.Input
              onChange={(event) => {}}
              placeholder={t('search.label')}
              className="bg-transparent
              focus:outline-none
              px-4 py-2 w-full"
            />
          </div>
          <div className="flex-none">
            <Button
              htmlType="button"
              iconed="only"
              className="w-10 h-10"
              variant="blue"
              type="text"
              onClick={hideSearchbar}
            >
              <SVGTimesIcon className="w-full h-full stroke-current" />
            </Button>
          </div>
        </div>
        <Combobox.Options>

        </Combobox.Options>
      </Combobox>
    </Modal>
  );
}
