import React, { useState, useEffect } from 'react';

import { useTheme } from '@mui/material/styles';
import Grid from '@mui/material/Unstable_Grid2';
import { Chip, Avatar, Typography } from '@mui/material';

import { FiltersBar } from './filters-bar';
import { FiltersSideBar } from './filters-side-bar';
import { IFilter, IActiveFilter, IFilterItemData, IFilterMainProps } from '../types';

/**
 * @description FilterMain - component
 * @param {IFilterMainProps} props - The props of the filter main
 * @return {JSX.Element} component - The filter main
 */
export const FilterMain = ({
  fetchFn,
  featureName,
  allFilters,
  activeFilters,
  onSideBarToggle,
  onActiveFiltersUpdate,
}: IFilterMainProps): JSX.Element => {
  const { palette } = useTheme();

  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
  const [searchText, setSearchText] = useState<string>('');
  const [filterSidebarData, setFilterSidebarData] = useState<IFilterItemData[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);

  const handleSidebarToggle = () => {
    setIsSidebarOpen(!isSidebarOpen);
    onSideBarToggle();
  };

  const handleRemoveAllActiveFilters = () => {
    onActiveFiltersUpdate([]);
  };

  const handleApplyFilter = (filterApplied: IFilter, itemsApplied: IFilterItemData[]) => {
    if (!itemsApplied?.length) {
      handleRemoveFilter(filterApplied);
      return;
    }

    const filterToUpdate = activeFilters.find((filter) => filter.id === filterApplied.id);

    let newActiveFilters: IActiveFilter[];

    if (filterToUpdate) {
      newActiveFilters = activeFilters.map((filter: IActiveFilter) => {
        if (filter.id === filterToUpdate.id) {
          return { ...filter, itemsApplied };
        }
        return filter;
      });
    } else {
      newActiveFilters = [...activeFilters, { ...filterApplied, itemsApplied }];
    }

    console.log('newActiveFilters:', newActiveFilters);

    onActiveFiltersUpdate(newActiveFilters);
  };

  const handleRemoveFilter = (filterToDelete: IFilter) => {
    const newActiveFilters = activeFilters.filter((filter) => filter.id !== filterToDelete.id);
    onActiveFiltersUpdate(newActiveFilters);
  };

  useEffect(() => {
    if (!fetchFn) return;
    setIsLoading(true);
    fetchFn({
      searchText,
    }).then((result: any) => {
      setIsLoading(false);
      console.log('RESULT ====>', result);
      setFilterSidebarData(result?.Results);
    });
  }, [searchText]);

  const searchTextCallBack = (searchFilterText: string) => {
    setSearchText(searchFilterText);
  };

  return (
    <>
      <Grid
        container
        spacing={1}
        direction="row"
        xs={12}
        md={12}
        sx={{ mb: isSidebarOpen ? 2 : 0, ml: '4px' }}
      >
        <Grid>
          <Chip
            avatar={
              <Avatar
                sx={{
                  backgroundColor: 'white',
                  border: `1px solid ${palette?.primary?.lighter}`,
                }}
              >
                <Typography variant="caption" sx={{ color: palette?.grey?.[600] }}>
                  {activeFilters?.length}
                </Typography>
              </Avatar>
            }
            label="Filter"
            variant="outlined"
            onClick={handleSidebarToggle}
            onDelete={handleRemoveAllActiveFilters}
            sx={{
              border: `1px solid ${palette?.primary?.lighter}`,
              borderRadius: '50px',
              '& .MuiChip-deleteIcon': {
                color: palette?.grey?.[600],
                opacity: 1,
                ':hover': {
                  color: palette?.grey?.[800],
                },
              },
            }}
          />
        </Grid>
        {!!activeFilters?.length && (
          <FiltersBar
            isLoading={isLoading}
            searchTextCallBack={searchTextCallBack}
            featureName={featureName}
            activeFilters={activeFilters}
            onApplyFilter={handleApplyFilter}
            onRemoveFilter={handleRemoveFilter}
            filterSidebarData={filterSidebarData}
          />
        )}
      </Grid>
      {isSidebarOpen && (
        <FiltersSideBar
          isLoading={isLoading}
          searchTextCallBack={searchTextCallBack}
          featureName={featureName}
          activeFilters={activeFilters}
          allFilters={allFilters}
          onApplyFilter={handleApplyFilter}
          filterSidebarData={filterSidebarData}
        />
      )}
    </>
  );
};