import React from "react";
import { ServicesStore } from "services/domain/servicesStore";
import { RootState, useAppDispatch, useAppSelector } from "store";
import { getServicesAction } from "./servicesActions";
import { ServicesStoreState } from "./servicesReducer";

const servicesSelector = (state: RootState): ServicesStoreState =>
  state.services;

const useServicesStore = (): ServicesStore => {
  const { services, isLoading, isFailed, failure } =
    useAppSelector(servicesSelector);

  const dispatch = useAppDispatch();

  const loadServices = React.useCallback(
    () => getServicesAction()(dispatch),
    [dispatch]
  );

  return {
    /* ---------------------------------- State --------------------------------- */
    isLoading,
    isFailed,
    services,
    failure,
    /* --------------------------------- Actions -------------------------------- */
    loadServices,
  };
};

export { useServicesStore };
