import React, { useState } from 'react';

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

import { FilterDropdown } from './filter-dropdown';
import { IFilter, IActiveFilter, IFilterItemData, IFiltersBarProps } from '../types';

/**
 * @description FiltersBar - component
 * @param {IFiltersBarProps} props - The props of the filters bar
 * @return {React.ReactNode} component - The filters bar
 */
export const FiltersBar = ({
  filterSidebarData,
  featureName,
  activeFilters,
  onApplyFilter,
  onRemoveFilter,
  searchTextCallBack,
  isLoading,
}: IFiltersBarProps): JSX.Element => {
  const { palette } = useTheme();
  const [anchorEl, setAnchorEl] = useState(null);
  const [openedFilter, setOpenedFilter] = useState<string>('');

  // handle clicking the filter chip
  const handleFilterDropdownOpen = (event: any, filter: string) => {
    setAnchorEl(event?.currentTarget);
    setOpenedFilter(openedFilter === filter ? '' : filter);
  };

  // handle closing the popover / dropdown
  const handleDropdownClose = () => {
    setOpenedFilter('');
  };

  // handle applying the filter after clicking the apply button
  const handleApplyFilter = (filterApplied: IFilter, itemsApplied: IFilterItemData[]) => {
    onApplyFilter(filterApplied, itemsApplied);

    setOpenedFilter('');
  };

  // handle deleting the filter after clicking the delete icon
  const handleFilterDelete = (filterToDelete: IFilter) => {
    onRemoveFilter(filterToDelete);
    setOpenedFilter('');
  };

  return (
    <>
      {activeFilters?.map((filter: IActiveFilter, index: number) => (
        <Grid key={index}>
          <Chip
            avatar={
              <Avatar
                sx={{
                  backgroundColor: 'white',
                  border: `1px solid ${palette?.primary?.lighter}`,
                }}
              >
                <Typography variant="caption" sx={{ color: palette?.grey?.[600] }}>
                  {filter?.itemsApplied?.length ?? 0}
                </Typography>
              </Avatar>
            }
            label={filter.displayName}
            variant="outlined"
            onClick={(event) => handleFilterDropdownOpen(event, filter.name)}
            onDelete={() => handleFilterDelete(filter)}
            sx={{
              border: `1px solid ${palette?.primary?.lighter}`,
              borderRadius: '50px',
              '& .MuiChip-deleteIcon': {
                color: palette?.grey?.[600],
                opacity: 1,
                ':hover': {
                  color: palette?.grey?.[800],
                },
              },
            }}
          />
          {openedFilter === filter.name && (
            <FilterDropdown
              isLoading={isLoading}
              searchTextCallBack={searchTextCallBack}
              filterSidebarData={filterSidebarData}
              featureName={featureName}
              filter={filter}
              itemsApplied={filter.itemsApplied}
              anchorEl={anchorEl}
              onApplyFilter={handleApplyFilter}
              onDropdownClose={handleDropdownClose}
            />
          )}
        </Grid>
      ))}
    </>
  );
};