import React, { Component } from 'react';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';

import { useLocation } from 'react-router-dom';

// Import extracted components
import { Logo, SearchBar, ButtonGroupWithRouter, CategoryList } from './header/index.js';

// Main Header Component
class Header extends Component {

  constructor(props) {
    super(props);
    this.state = {
      cartItems: []
    };
  }

  handleCartQuantityChange = (productId, quantity) => {
    this.setState(prevState => ({
      cartItems: prevState.cartItems.map(item =>
        item.id === productId ? { ...item, quantity } : item
      )
    }));
  };

  handleCartRemoveItem = (productId) => {
    this.setState(prevState => ({
      cartItems: prevState.cartItems.filter(item => item.id !== productId)
    }));
  };

  render() {

    const { isHomePage, isProfilePage, isAktionenPage, isFilialePage } = this.props;

    return (
      <AppBar position="sticky" color="primary" elevation={0} sx={{ zIndex: 1100 }}>
        <Toolbar sx={{ minHeight: 64, py: { xs: 0.5, sm: 0 } }}>
          <Container maxWidth="lg" sx={{ 
            display: 'flex', 
            alignItems: 'center',
            px: { xs: 0, sm: 3 }
          }}>
            {/* First row: Logo and ButtonGroup on xs, all items on larger screens */}
            <Box sx={{ 
              display: 'flex', 
              alignItems: 'center', 
              width: '100%',
              flexDirection: { xs: 'column', sm: 'row' }
            }}>
              {/* Top row for xs, single row for larger screens */}
              <Box sx={{ 
                display: 'flex', 
                alignItems: 'center', 
                width: '100%',
                justifyContent: { xs: 'space-between', sm: 'flex-start' },
                minHeight: { xs: 52, sm: 'auto' },
                px: { xs: 0, sm: 0 }
              }}>
                <Logo />
                {/* SearchBar visible on sm and up */}
                <Box sx={{ display: { xs: 'none', sm: 'block' }, flexGrow: 1 }}>
                  <SearchBar />
                </Box>
                <Box sx={{ 
                  display: 'flex',
                  alignItems: { xs: 'flex-end', sm: 'center' },
                  transform: { xs: 'translateY(4px) translateX(9px)', sm: 'none' },
                  ml: { xs: 0, sm: 0 }
                }}>
                  <ButtonGroupWithRouter/>
                </Box>
              </Box>
              
              {/* Second row: SearchBar only on xs - make it wider */}
              <Box sx={{ 
                display: { xs: 'block', sm: 'none' }, 
                width: '100%',
                mt: { xs: 1, sm: 0 },
                mb: { xs: 0.5, sm: 0 },
                px: { xs: 0, sm: 0 }
              }}>
                <Box sx={{ width: '100%' }}>
                  <SearchBar />
                </Box>
              </Box>
            </Box>
          </Container>
        </Toolbar>
        {(isHomePage || this.props.categoryId || isProfilePage || isAktionenPage || isFilialePage || this.props.isArtikel) && <CategoryList categoryId={209} activeCategoryId={this.props.categoryId}/>}
      </AppBar>
    );
  }
}

// Use a wrapper function to provide context
const HeaderWithContext = (props) => {
  const location = useLocation();
  const isHomePage = location.pathname === '/';
  const isProfilePage = location.pathname === '/profile';
  const isAktionenPage = location.pathname === '/aktionen';
  const isFilialePage = location.pathname === '/filiale';
  const isArtikel = location.pathname.startsWith('/Artikel/');

  return (

      <Header {...props} isHomePage={isHomePage} isArtikel={isArtikel} isProfilePage={isProfilePage} isAktionenPage={isAktionenPage} isFilialePage={isFilialePage} />

  );
};

export default HeaderWithContext;