import { useEffect } from 'react';

import { isMobileScreen } from 'src/utils/recognitions';

export const useMobileLayout = (isMobile = true) => {
  const isMobileView = isMobileScreen();

  // Prevent pinch-to-zoom and double-tap-to-zoom inside mobile WebViews
  useEffect(() => {
    if (!isMobile || !isMobileView) return;

    const viewport = document.querySelector('meta[name="viewport"]');
    const originalContent = viewport?.getAttribute('content') ?? '';

    if (viewport) {
      viewport.setAttribute(
        'content',
        'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no',
      );
    }

    return () => {
      if (viewport) {
        viewport.setAttribute('content', originalContent);
      }
    };
  }, [isMobile, isMobileView]);

  if (!isMobile) {
    return;
  }

  const navbar = document.getElementById('dashboard-navbar');
  const sidebarDrawer = document.getElementById('sidebar-drawer');
  const wrapper = document.getElementById('dashboard-layout-wrapper');

  if (isMobileView && navbar && sidebarDrawer && wrapper) {
    navbar.style.display = 'none';
    sidebarDrawer.style.display = 'none';
    wrapper.style.paddingTop = '0px';
    wrapper.style.paddingLeft = '0px';
  }
};
