import React, { Component } from 'react';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import Filter from './Filter.js';
import { useParams, useSearchParams, useNavigate, useLocation } from 'react-router-dom';
import { setSessionSetting, removeSessionSetting, clearAllSessionSettings } from '../utils/sessionStorage.js';
import { withI18n } from '../i18n/withTranslation.js';

const isNew = (neu) => neu && (new Date().getTime() - new Date(neu).getTime() < 30 * 24 * 60 * 60 * 1000);

// HOC to provide router props to class components
const withRouter = (ClassComponent) => {
  return (props) => {
    const params = useParams();
    const [searchParams] = useSearchParams();
    const navigate = useNavigate();
    const location = useLocation();
    return <ClassComponent 
      {...props} 
      params={params} 
      searchParams={searchParams}
      navigate={navigate}
      location={location} 
    />;
  };
};

class ProductFilters extends Component {
  constructor(props) {
    super(props);

    const uniqueManufacturerArray = this._getUniqueManufacturers(this.props.products);
    const attributeGroups = this._getAttributeGroups(this.props.attributes);
    const availabilityValues = this._getAvailabilityValues(this.props.products);

    this.state = {
      availabilityValues,
      uniqueManufacturerArray,
      attributeGroups,
      manufacturerImages: new Map(), // id (number) → object URL
    };

    this._manufacturerImageUrls = []; // track for cleanup
  }

  componentDidMount() {
    this.adjustPaperHeight();
    window.addEventListener('resize', this.adjustPaperHeight);
    this._loadManufacturerImages();
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.adjustPaperHeight);
    this._manufacturerImageUrls.forEach(url => URL.revokeObjectURL(url));
  }

  _loadManufacturerImages = () => {
    window.socketManager.emit('getHerstellerImages', {}, (res) => {
      if (!res?.success || !res.manufacturers?.length) return;
      const map = new Map();
      for (const m of res.manufacturers) {
        if (!m.imageBuffer) continue;
        const blob = new Blob([m.imageBuffer], { type: 'image/avif' });
        const url = URL.createObjectURL(blob);
        map.set(m.id, url);
        this._manufacturerImageUrls.push(url);
      }
      this.setState({ manufacturerImages: map });
    });
  };

  componentDidUpdate(prevProps) {
    // Regenerate values when products, attributes, or language changes
    const productsChanged = this.props.products !== prevProps.products;
    const attributesChanged = this.props.attributes !== prevProps.attributes;
    const languageChanged = this.props.i18n && prevProps.i18n && this.props.i18n.language !== prevProps.i18n.language;
    const tFunctionChanged = this.props.t !== prevProps.t;
    
    if(languageChanged) {
      console.log('ProductFilters: Language changed, will update when new data arrives');
    }
    
    if(productsChanged || languageChanged || tFunctionChanged) {
      console.log('ProductFilters: Updating manufacturers and availability', {
        productsChanged,
        languageChanged,
        tFunctionChanged,
        productCount: this.props.products?.length
      });
      const uniqueManufacturerArray = this._getUniqueManufacturers(this.props.products);
      const availabilityValues = this._getAvailabilityValues(this.props.products);
      this.setState({uniqueManufacturerArray, availabilityValues});
    }
    
    if(attributesChanged || (languageChanged && this.props.attributes)) {
      console.log('ProductFilters: Updating attributes', {
        attributesChanged,
        languageChanged,
        attributeCount: this.props.attributes?.length,
        firstAttribute: this.props.attributes?.[0]
      });
      const attributeGroups = this._getAttributeGroups(this.props.attributes);
      this.setState({attributeGroups});
    }
  }


  adjustPaperHeight = () => {
    // Skip height adjustment on xs screens
    if (window.innerWidth < 600) return;
    
    // Get reference to our paper element
    const paperEl = document.getElementById('filters-paper');
    if (!paperEl) return;

    // Get viewport height
    const viewportHeight = window.innerHeight;
    
    // Get the offset top position of our paper element
    const paperTop = paperEl.getBoundingClientRect().top;
    
    // Estimate footer height (adjust as needed)
    const footerHeight = 80; // Reduce from 150px
    
    // Calculate available space and set height
    const availableHeight = viewportHeight - paperTop - footerHeight;
    // Add a smaller buffer margin to prevent scrolling but get closer to footer
    const heightWithBuffer = availableHeight - 20; // Reduce buffer from 50px to 20px
    paperEl.style.minHeight = `${heightWithBuffer}px`;
  }

  _getUniqueManufacturers = (products) => {
    const manufacturers = {};

    for (const product of products)
      if (!manufacturers[product.manufacturerId])
        manufacturers[product.manufacturerId] = product.manufacturer;

    const uniqueManufacturerArray = Object.entries(manufacturers)
      .filter(([_id, name]) => name !== null) // Filter out null names
      .map(([id, name]) => ({
        id: parseInt(id),
        name: name
      }))
      .sort((a, b) => a.name.localeCompare(b.name));
    return uniqueManufacturerArray;
  }

  _getAvailabilityValues = (products) => {
    const filters = [{id:1,name: this.props.t ? this.props.t('product.inStock') : 'auf Lager'}];
    
    for(const product of products){
      if(isNew(product.neu)){
        if(!filters.find(filter => filter.id == 2)) filters.push({id:2,name: this.props.t ? this.props.t('product.new') : 'Neu'});
      }
      if(!product.available && product.incomingDate){
        if(!filters.find(filter => filter.id == 3)) filters.push({id:3,name: this.props.t ? this.props.t('product.comingSoon') : 'Bald verfügbar'});       
      }
    }
    return filters
  }

  _getAttributeGroups = (attributes) => {
    const attributeGroups = {};
    if(attributes) for(const attribute of attributes) {
      if(!attributeGroups[attribute.cName]) attributeGroups[attribute.cName] = {name:attribute.cName, values:{}};
      attributeGroups[attribute.cName].values[attribute.kMerkmalWert] = {id:attribute.kMerkmalWert, name:attribute.cWert};
    }
    return attributeGroups;
  }

  generateAttributeFilters = () => {
    const filters = [];
    const sortedAttributeGroups = Object.values(this.state.attributeGroups)
      .sort((a, b) => a.name.localeCompare(b.name));

    for(const attributeGroup of sortedAttributeGroups) {
      const filter = (
        <Filter
          key={`attr-filter-${attributeGroup.name}`}
          title={attributeGroup.name}
          options={Object.values(attributeGroup.values)}
          filterType="attribute"
          products={this.props.products}
          filteredProducts={this.props.filteredProducts}
          attributes={this.props.attributes}
          onFilterChange={(msg)=>{
            if(msg.value) {
              setSessionSetting(`filter_${msg.type}_${msg.name}`, 'true');
            } else {
              removeSessionSetting(`filter_${msg.type}_${msg.name}`);
            }
            this.props.onFilterChange();
          }}
        />
      )
      filters.push(filter);
    }
    return filters;
  }

  render() {
    return (
      <Paper 
        id="filters-paper"
        elevation={window.innerWidth < 600 ? 0 : 1} 
        sx={{ 
          p: { xs: 1, sm: 2 }, 
          borderRadius: { xs: 0, sm: 2 }, 
          bgcolor: 'background.paper',
          display: 'flex',
          flexDirection: 'column',
          border: { xs: 'none', sm: 'inherit' },
          boxShadow: { xs: 'none', sm: 'inherit' },
          mx: { xs: 0, sm: 'auto' },
          width: { xs: '100%', sm: 'auto' }
        }}
      >

{this.props.dataType == 'category' && (
            <Typography 
              variant="h3" 
              component="h1" 
              sx={{ 
                mb: 4, 
                fontFamily: 'SwashingtonCP',
                color: 'primary.main'
              }}
            >
              {this.props.categoryName}
            </Typography>
          )}


        {this.props.products.length > 0 && (
          <><Filter 
          title={this.props.t ? this.props.t('filters.availability') : 'Verfügbarkeit'}
          options={this.state.availabilityValues}
          searchParams={this.props.searchParams}
          products={this.props.products}
          filteredProducts={this.props.filteredProducts}
          attributes={this.props.attributes}
          filterType="availability"
          onFilterChange={(msg)=>{
            
            if(msg.resetAll) {
              sessionStorage.removeItem('filter_availability');
              clearAllSessionSettings();
              this.props.onFilterChange();
              return;
            }

            if(!msg.value) {
              console.log('msg',msg);
              if(msg.name == '1') sessionStorage.setItem('filter_availability', msg.name);
              if(msg.name != '1') removeSessionSetting(`filter_${msg.type}_${msg.name}`);
              //this.props.navigate({
              //  pathname: this.props.location.pathname,
              //  search: `?inStock=${msg.name}`
              //}); 
            } else {
              if(msg.name == '1') sessionStorage.removeItem('filter_availability');
              if(msg.name != '1') setSessionSetting(`filter_${msg.type}_${msg.name}`, 'true');
              console.log('msg',msg);
              //this.props.navigate({
              //  pathname: this.props.location.pathname,
              //  search: this.props.location.search.replace(/inStock=[^&]*/, '')
              //});
            }
            
            this.props.onFilterChange();
          
          
          }}
        />

        {this.generateAttributeFilters()}

        <Filter 
          title={this.props.t ? this.props.t('filters.manufacturer') : 'Hersteller'}
          options={this.state.uniqueManufacturerArray}
          filterType="manufacturer"
          products={this.props.products}
          filteredProducts={this.props.filteredProducts}
          attributes={this.props.attributes}
          manufacturerImages={this.state.manufacturerImages}
          onFilterChange={(msg)=>{ 
            if(msg.value) {
              setSessionSetting(`filter_${msg.type}_${msg.name}`, 'true');
            } else {
              removeSessionSetting(`filter_${msg.type}_${msg.name}`);
            }
            this.props.onFilterChange();
          }}
        />
        </>)}
      </Paper>
    );
  }
}

export default withRouter(withI18n()(ProductFilters)); 