/* eslint-disable react-hooks/exhaustive-deps */
import { ReactNode, useEffect } from 'react';
import { useOutletContext } from 'react-router';
import { ContextType } from '.';
import { FooterItemActiveKey } from '@/entities/common/model/types';
import { HeaderType } from '@/entities/common/model/types';

export const useSubLayoutContext = () => {
  return useOutletContext<ContextType>();
};

export const useSetOnBack = (fn: any) => {
  const { setOnBack } = useSubLayoutContext();
  useEffect(() => {
    setOnBack(() => fn);
    return () => {
      setOnBack(() => undefined);
    };
  }, [setOnBack]);
  return { setOnBack };
};

export const useSetHeaderTitle = (title: string) => {
  const { setHeaderTitle } = useSubLayoutContext();
  useEffect(() => {
    setHeaderTitle(title);
    return () => setHeaderTitle('');
  }, [setHeaderTitle]);
  return { setHeaderTitle };
};

export const useSetIsPullToRefreshEnabled = (enabled: boolean) => {
  const { setIsPullToRefreshEnabled } = useSubLayoutContext();
  useEffect(() => {
    setIsPullToRefreshEnabled(enabled);
    return () => setIsPullToRefreshEnabled(false);
  }, [setIsPullToRefreshEnabled, enabled]);
  return { setIsPullToRefreshEnabled };
};

export const useSetMenuOn = (on: boolean) => {
  const { setMenuOn } = useSubLayoutContext();
  useEffect(() => {
    setMenuOn(on);
    return () => setMenuOn(false);
  }, [setMenuOn, on]);
  return { setMenuOn };
};

export const useSetHeaderType = (headerType: HeaderType) => {
  const { setHeaderType } = useSubLayoutContext();
  useEffect(() => {
    setHeaderType(headerType);
    return () => setHeaderType(HeaderType.NoHeader);
  }, [setHeaderType]);
  return { setHeaderType };
};

export const useSetFooterMode = (footerMode: boolean) => {
  const { setFooterMode } = useSubLayoutContext();
  useEffect(() => {
    setFooterMode(footerMode);
    return () => setFooterMode(false);
  }, [setFooterMode, footerMode]);
  return { setFooterMode };
};

export const useSetFooterCurrentPage = (footerCurrentPage?: FooterItemActiveKey | null) => {
  const { setFooterCurrentPage } = useSubLayoutContext();
  useEffect(() => {
    setFooterCurrentPage(footerCurrentPage);
    return () => setFooterCurrentPage(undefined);
  }, [setFooterCurrentPage, footerCurrentPage]);
  return { setFooterCurrentPage };
};