import React from "react";
import { UIStore } from "ui/domain/uiStore";
import { changeSearchQueryUseCase } from "ui/useCases/changeSearchQueryUseCase";
import { drawerCollapseUseCase } from "ui/useCases/drawerCollapseUseCase";
import { hideSearchbarUseCase } from "ui/useCases/hideSearchbarUseCase";
import { initDrawerUseCase } from "ui/useCases/initDrawerUseCase";
import { showSearchbarUseCase } from "ui/useCases/showSearchbarUseCase";

function useUIViewModel(store: UIStore) {
  /* -------------------------------- Searchbar ------------------------------- */
  const showSearchbar = React.useCallback(
    function () {
      showSearchbarUseCase({
        isSearchbarShown: store.isSearchbarShown,
        searchbarShown: store.searchbarShown,
      });
    },
    [store.isSearchbarShown, store.searchbarShown]
  );

  const hideSearchbar = React.useCallback(
    function () {
      hideSearchbarUseCase({
        isSearchbarShown: store.isSearchbarShown,
        searchbarShown: store.searchbarShown,
      });
    },
    [store.isSearchbarShown, store.searchbarShown]
  );
  /* --------------------------------- Search --------------------------------- */
  const changeQuery = React.useCallback(
    (query: string) =>
      changeSearchQueryUseCase(
        {
          query: store.query,
          changeQuery: store.changeQuery,
          executeQuery: store.executeQuery,
        },
        query
      ),
    [store.query, store.changeQuery, store.executeQuery]
  );
  /* --------------------------------- Drawer --------------------------------- */
  const initDrawer = React.useCallback(
    function () {
      initDrawerUseCase({
        initDrawer: store.initDrawer,
      });
    },
    [store.initDrawer]
  );
  const toggleDrawer = React.useCallback(
    function () {
      drawerCollapseUseCase({
        drawerIs: store.drawerIs,
        isDrawerCollapsed: store.isDrawerCollapsed,
      });
    },
    [store.drawerIs, store.isDrawerCollapsed]
  );

  return {
    /* -------------------------------- Searchbar ------------------------------- */
    isSearchbarShown: store.isSearchbarShown,
    showSearchbar,
    hideSearchbar,
    /* ------------------------------- Search flow ------------------------------ */
    query: store.query,
    changeQuery,
    /* -------------------------------- Side menu ------------------------------- */
    isDrawerCollapsed: store.isDrawerCollapsed,
    toggleDrawer,
    initDrawer,
  };
}

export { useUIViewModel };
