import React, { useState } from 'react';

import { useTheme } from '@mui/material/styles';
import Grid from '@mui/material/Unstable_Grid2';
import { Card, Typography } from '@mui/material';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';

import { FilterDetails } from './filter-details';
import { IFilter, IFilterItemData, IFiltersSideBarProps } from '../types';

/**
 * @description FiltersSideBar - component
 * @param {IFiltersSideBarProps} props - The props of the filters side bar
 * @return {React.ReactNode} component - The filters side bar
 */
export const FiltersSideBar = ({
  featureName,
  allFilters,
  activeFilters,
  onApplyFilter,
  filterSidebarData,
  searchTextCallBack,
  isLoading,
}: IFiltersSideBarProps): JSX.Element => {
  const { palette } = useTheme();

  const [openedFilter, setOpenedFilter] = useState<IFilter>();

  const handleApplyFilter = (filterApplied: IFilter, itemsApplied: IFilterItemData[]) => {
    onApplyFilter(filterApplied, itemsApplied);
    setOpenedFilter(undefined);
  };

  const handleBack = () => {
    setOpenedFilter(undefined);
  };

  const getFilterAppliedItems = (filterId: string) => {
    const activeFilter = activeFilters?.find((filter) => filter.id === filterId);
    if (!activeFilter) return [];
    return activeFilter?.itemsApplied;
  };

  return (
    <Grid container xs={12} md={3} sx={{ pr: '21px', pl: '5px' }}>
      <Card
        sx={{
          transition: 'all 0.3s',
          height: '600px',
          // width: '300px',
          width: '100%',
          p: 2,
          pt: 0.5,
          mt: 1,
          border: `1px solid ${palette?.grey?.[300]}`,
        }}
      >
        {!openedFilter &&
          allFilters?.map((filter: IFilter, index: number) => (
            <Grid
              key={index}
              sx={{
                display: 'flex',
                justifyContent: 'space-between',
                cursor: 'pointer',
                pr: 0,
                py: 0,
                my: 3,
              }}
              onClick={() => setOpenedFilter(filter)}
            >
              <Typography variant="body2" sx={{ fontWeight: 700 }}>
                {filter.displayName}
              </Typography>
              <Typography
                variant="body2"
                sx={{ color: 'grey.600', display: 'flex', alignItems: 'center', gap: 0.25 }}
              >
                {filter.itemsTotal}
                <KeyboardArrowRightIcon sx={{ fontSize: 22 }} />
              </Typography>
            </Grid>
          ))}
        {openedFilter && (
          <FilterDetails
            isLoading={isLoading}
            filterSidebarData={filterSidebarData}
            featureName={featureName}
            filter={openedFilter}
            itemsApplied={getFilterAppliedItems(openedFilter.id)}
            onApplyFilter={handleApplyFilter}
            onBack={handleBack}
            searchTextCallBack={searchTextCallBack}
          />
        )}
      </Card>
    </Grid>
  );
};