import React, { useState, useEffect } from 'react';
import { SearchBar, ScrollBar } from '@seliseblocks/next-bars';

import { useTheme } from '@mui/material/styles';
import Grid from '@mui/material/Unstable_Grid2';
import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
import {
  List,
  Button,
  Checkbox,
  ListItem,
  Skeleton,
  Typography,
  IconButton,
  ListItemText,
} from '@mui/material';

import { IFilterItemData, IFilterDetailsProps } from '../types';

/**
 * @description FilterDetails - component to render filter details view
 * @param {IFilterDetailsProps} props - The props of the filter details
 * @return {JSX.Element} component - The filter details
 */
export const FilterDetails = ({
  filter,
  itemsApplied,
  onApplyFilter,
  onBack,
  itemsListHeight,
  filterSidebarData,
  searchTextCallBack,
  isLoading,
}: IFilterDetailsProps): JSX.Element => {
  const { palette } = useTheme();

  const [searchValue, setSearchValue] = useState<string>(''); // search value
  const [isAllSelected, setIsAllSelected] = useState<boolean>(false); // is all selected
  const [selectedItems, setSelectedItems] = useState<IFilterItemData[]>(itemsApplied ?? []); // selected items
  const [matchedItems, setMatchedItems] = useState<IFilterItemData[]>(filterSidebarData ?? []); // matched items based on search value

  useEffect(() => {
    let newMatchedItems = filterSidebarData?.filter((item) =>
      item.name.includes(searchValue || '')
    );
    if (!newMatchedItems) newMatchedItems = [];
    setMatchedItems(newMatchedItems);
  }, [filterSidebarData, searchValue]);

  // handle search
  const handleSearch = (value: string) => {
    setSearchValue(value);
    searchTextCallBack(value);
  };

  // handle toggle all
  const handleToggleItemsAll = () => {
    setIsAllSelected(!isAllSelected);
    setSelectedItems(isAllSelected ? [] : [...matchedItems]);
  };

  // handle checkbox toggle
  const handleToggleItem = (item: IFilterItemData) => () => {
    const currentIndex = selectedItems?.findIndex((selectedItem) => selectedItem.id === item.id);
    const newSelectedItems = [...selectedItems];

    if (currentIndex === -1) {
      newSelectedItems.push({ ...item });
    } else {
      newSelectedItems.splice(currentIndex, 1);
    }

    setSelectedItems(newSelectedItems);
    setIsAllSelected(newSelectedItems.length === filterSidebarData?.length);
  };

  // handle selected list after clicking apply filter button
  const handleApplyFilter = () => {
    onApplyFilter(filter, selectedItems);
  };

  return (
    <>
      <Grid container justifyContent="space-between" alignItems="center" sx={{ p: '16px 16px 0' }}>
        <Grid sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          {onBack && (
            <IconButton onClick={onBack} aria-label="back" color="inherit" size="small">
              <KeyboardArrowLeftIcon sx={{ color: palette?.grey?.[900] }} fontSize="small" />
            </IconButton>
          )}
          <Typography
            variant="body2"
            color={palette?.grey?.[900]}
            sx={{ fontSize: 16, fontWeight: 700 }}
          >
            {filter.displayName}
          </Typography>
        </Grid>
        <Grid>
          <Button onClick={handleApplyFilter} color="inherit">
            <Typography
              variant="body2"
              sx={{
                color: palette?.grey?.[900],
                fontWeight: 700,
                fontSize: 13,
              }}
            >
              Apply Filter
            </Typography>
          </Button>
        </Grid>
      </Grid>
      <SearchBar
        variant="outlined"
        fullwidth
        value={searchValue}
        placeholder={`Search "${filter.displayName}"`}
        callback={handleSearch}
        size="small"
      />
      <Typography
        variant="body2"
        sx={{ pl: 2, pb: 1, fontWeight: 700, color: palette?.grey?.[600] }}
      >
        SELECT {filter.name.toUpperCase()}
      </Typography>
      <ScrollBar
        sx={{
          height: itemsListHeight ?? 'calc(100% - 200px)',
        }}
      >
        <Grid container>
          {isLoading ? (
            <Grid container xs={12} md={12} alignItems="center" sx={{ px: '16px', pt: '16px' }}>
              <Skeleton height={30} width="100%" sx={{ mt: '5px' }} />
              <Skeleton height={30} width="100%" sx={{ mt: '10px', ml: '16px' }} />
              <Skeleton height={30} width="100%" sx={{ mt: '10px', ml: '16px' }} />
              <Skeleton height={30} width="100%" sx={{ mt: '10px', ml: '16px' }} />
              <Skeleton height={30} width="100%" sx={{ mt: '10px', ml: '16px' }} />
            </Grid>
          ) : (
            <List>
              <ListItem dense onClick={handleToggleItemsAll} sx={{ pt: 0.25, pb: 0.25 }}>
                <Checkbox
                  color="default"
                  edge="start"
                  checked={isAllSelected}
                  tabIndex={-1}
                  disableRipple
                  size="small"
                />
                <ListItemText primary="All" />
              </ListItem>
              {matchedItems.map((item: IFilterItemData) => (
                <ListItem
                  key={item.id}
                  dense
                  onClick={handleToggleItem(item)}
                  sx={{ pl: 3, pt: 0.25, pb: 0.25 }}
                >
                  <Checkbox
                    color="default"
                    edge="start"
                    checked={selectedItems.some((selectedItem) => selectedItem.id === item.id)}
                    tabIndex={-1}
                    disableRipple
                    size="small"
                  />
                  <ListItemText primary={item.name} />
                </ListItem>
              ))}
            </List>
          )}
        </Grid>
      </ScrollBar>
    </>
  );
};