import { 
  Fragment,
  useState
} from 'react';
import { Outlet } from 'react-router-dom';
import { HeaderNavigation } from '@/widgets/navigation/header';
import { FooterNavigation } from '@/widgets/navigation/footer';
import { PullToRefresh } from '@/widgets/pull-to-refresh/pull-to-refresh';
import { useNavigate } from '@/shared/lib/hooks';
import { useScrollToTop } from '@/shared/lib/hooks/use-scroll-to-top';
import { HeaderType } from '@/entities/common/model/types';
export interface ContextType {
  setOnBack: (onBack: () => void) => void;
  setHeaderTitle: (title: string) => void;
  setIsPullToRefreshEnabled: (enabled: boolean) => void;
  setMenuOn:(on: boolean) => void;
  setHeaderType: (headerType: HeaderType) => void;
  setFooterMode:(footMode: boolean) => void;
  setFooterCurrentPage:(currentPage?: string | null) => void;
};

export const SubLayout = () => {
  const { reload } = useNavigate();
  useScrollToTop();
  const [onBack, setOnBack] = useState(undefined);
  const [headerTitle, setHeaderTitle] = useState<string>('');
  const [isPullToRefreshEnabled, setIsPullToRefreshEnabled] = useState<boolean>(false);
  const [menuOn, setMenuOn] = useState<boolean>(false);
  const [headerType, setHeaderType] = useState<HeaderType>(HeaderType.NoHeader);
  const [footerMode, setFooterMode] = useState<boolean>(false);
  const [footerCurrentPage, setFooterCurrentPage] = useState<undefined | string | null>(undefined);
  
  const wrapperClassName = 'wrapper';

  return (
    <PullToRefresh 
      className={ wrapperClassName }
      onRefresh={ reload } 
      isPullable={ isPullToRefreshEnabled }
    >
      <Fragment>
        <HeaderNavigation 
          onBack={ onBack } 
          headerTitle={ headerTitle } 
          menuOn={ menuOn }
          setMenuOn={ setMenuOn } 
          headerType={ headerType }
        />
        <Outlet
          context={{
            setOnBack,
            setHeaderTitle,
            setIsPullToRefreshEnabled,
            setMenuOn,
            setHeaderType,
            setFooterMode,
            setFooterCurrentPage
          }}
        />
        {
          footerMode && 
          <FooterNavigation
            setMenuOn={ setMenuOn }
            footerCurrentPage={ footerCurrentPage }
          ></FooterNavigation>
        }
        
      </Fragment>
    </PullToRefresh>
  );
};
