import React, { ReactNode } from 'react';
import { useLocation } from 'react-router-dom';
import { useCheckoutSettings, useThankYouSettings } from '../hooks/useAppearanceSettings';
import { MinimalHeader } from '../components/Layout/MinimalHeader';
import { MinimalFooter } from '../components/Layout/MinimalFooter';

interface LayoutWrapperProps {
  children: ReactNode;
  header: ReactNode;
  footer: ReactNode;
}

export function LayoutWrapper({ children, header, footer }: LayoutWrapperProps) {
  const location = useLocation();
  const checkoutSettings = useCheckoutSettings();
  const thankYouSettings = useThankYouSettings();

  // Determine visibility settings based on current route
  let headerVisibility = 'show';
  let footerVisibility = 'show';
  let backgroundColor = '';

  if (location.pathname === '/checkout') {
    headerVisibility = checkoutSettings.layout.header_visibility || 'minimal';
    footerVisibility = checkoutSettings.layout.footer_visibility || 'minimal';
    backgroundColor = checkoutSettings.layout.background_color || '';
  } else if (location.pathname.startsWith('/order-received/')) {
    headerVisibility = thankYouSettings.headerVisibility || 'show';
    footerVisibility = thankYouSettings.footerVisibility || 'minimal';
    backgroundColor = thankYouSettings.backgroundColor || '';
  }

  // Render appropriate header
  const renderHeader = () => {
    if (headerVisibility === 'hide') return null;
    if (headerVisibility === 'minimal') return <MinimalHeader />;
    return header;
  };

  // Render appropriate footer
  const renderFooter = () => {
    if (footerVisibility === 'hide') return null;
    if (footerVisibility === 'minimal') return <MinimalFooter />;
    return footer;
  };

  return (
    <div className="layout-wrapper min-h-screen flex flex-col" style={backgroundColor ? { backgroundColor } : undefined}>
      {renderHeader()}
      <main className="flex-1">
        {children}
      </main>
      {renderFooter()}
    </div>
  );
}