import debounce from 'lodash.debounce';
import { useCallback, useState } from 'react';
import useSWR from 'swr';
import { popupApi } from '../utils/api';

const initialParams = {
  page: 1,
  pageSize: 10,
  sortBy: 'id',
  orderBy: 'DESC',
  searchQuery: '',
  categoryIds: [],
};

export const usePopups = () => {
  const [keyword, setKeyword] = useState('');
  const [params, setParams] = useState(initialParams);

  const { data, error, mutate } = useSWR(
    ['/v1/popups', JSON.stringify(params)],
    async () => {
      const newParams = { ...params };
      Object.keys(newParams).forEach((k) => {
        (newParams[k] === '' || newParams[k].length === 0) &&
          delete newParams[k];
      });

      return popupApi.getPopups(newParams);
    },
  );

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const debounceSearch = useCallback(
    debounce(
      (nextValue) => setParams((prev) => ({ ...prev, searchQuery: nextValue })),
      500,
    ),
    [],
  );

  const handleChangeKeyword = (val) => {
    setKeyword(val);
    debounceSearch(val);
  };

  const totalItems = data?.pagination?.totalItems;
  const totalPages = data?.pagination?.totalPages;
  const popups = data?.data?.popups;

  return {
    popups,
    loading: !data && !error,
    params,
    onChangeParams: setParams,
    keyword,
    onChangeKeyword: handleChangeKeyword,
    totalItems,
    totalPages,
    mutatePopups: mutate,
  };
};