import CloseIcon from "@components/aisera-icons/custom/CloseIcon";
import Button from "@components/Button/Button";
import { AddCircleOutline, ExpandMoreOutlined } from "@mui/icons-material";
import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Checkbox,
  Divider,
  FormControlLabel,
  List,
  ListItem,
  TextField,
} from "@mui/material";
import Popover from "@mui/material/Popover";
import dayjs from "dayjs";
import React, { useEffect } from "react";
import { FilterData } from "../Filter";
import FilterDropdown from "../FilterPopup/FilterDropdown";
import SingleSelect from "../SingleSelect/SingleSelect";
import "./add-filter.scss";

interface Option {
  label?: any;
  value?: any;
  type?: string
  filterOptions?: any;
  isSelected?: boolean;
  hideClearIcon?: boolean;
  groupIndex?: number;
  optionIndex?: number;
  defaultSelected?: any;
}

export interface FilterProps {
  label?: string;
  type?: string;
  options?: GroupOptions[] | Option[];

}

export interface GroupOptions {
  name: string;
  options: Option[];
}

export interface AddFilterProps {
  options: GroupOptions[];
  defaultOptions?: Option[];
  onChangeOptions: (filterData: FilterData[]) => void;
  hideAddFilter?: boolean;
  clearAll?: () => void;
  preSelectFilter?: FilterData[] | [];
}


const AddFilter = ({ options, defaultOptions, onChangeOptions, hideAddFilter, clearAll, preSelectFilter }: AddFilterProps) => {

  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
    null
  );

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };



  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;
  const [selectedOptions, setSelectedOptions] = React.useState<Option[]>([]);
  const [unselectedOptions, setUnselectedOptions] = React.useState<GroupOptions[]>(options);
  const [filterData, setFilterData] = React.useState<FilterData[]>([]);
  const [filterSelectedOptions, setFilterSelectedOptions] = React.useState<Option[]>([]);
  const [filterUnselectedOptions, setFilterUnselectedOptions] = React.useState<Option[]>([]);
  const [searchText, setSearchText] = React.useState<string>("");
  const [initialize, setInitialize] = React.useState<boolean>(false);

  const setPredefinedData = () => {
    let defaultData: Option[] = defaultOptions || [];
    const updatedOptions = defaultData.map(options => {
      let matchedFilter;
      if(preSelectFilter && preSelectFilter.length > 0) {
        matchedFilter = preSelectFilter?.find(opt => opt.field === options.value);
      }

      if (matchedFilter) {
        return { ...options, defaultSelected: matchedFilter.operand };
      }
      return options;
    });
    defaultData = updatedOptions;
    setInitialize(false);
    return updatedOptions;
  }

  const convertTimeStampToDates = (operand: number) => {
    const now = dayjs();
    const pastDiff = now.subtract(operand, 'day');
    console.log('date time now :::: ', now);
    console.log('3 days time ago ::: ', pastDiff);
  }

  useEffect(() => {
    setSelectedOptions(setPredefinedData());
  }, []);


  const clearAllFilters = () => {
    setSelectedOptions([]);
    const prevUnselectctedOptions = [...unselectedOptions];
    prevUnselectctedOptions.forEach(group => {
      group.options.forEach(option => {
        option.isSelected = false;
      });
    });
    setUnselectedOptions(prevUnselectctedOptions);
    setFilterData([]);
    if (clearAll) {
      clearAll();
    }

  }

  const handleToggleOption = (
    option: Option,
    isSelected: boolean,
    index: number,
    index2: number
  ) => {

    if (!isSelected) {
      const prevSelectedOptions = [
        ...selectedOptions,
        {
          ...unselectedOptions[index].options[index2],
          groupIndex: index,
          optionIndex: index2,
        }
      ];
      setSelectedOptions(prevSelectedOptions);
      const prevUnselectctedOptions = [...unselectedOptions];
      prevUnselectctedOptions[index].options[index2].isSelected = true;
      setUnselectedOptions(prevUnselectctedOptions);
    } else {

      const prevUnselectctedOptions = [...unselectedOptions];
      const prevSelectedOptions = [...selectedOptions];
      const removedElement = prevSelectedOptions[index];
      if (removedElement?.groupIndex != undefined && removedElement.optionIndex != undefined) {
        prevUnselectctedOptions[removedElement?.groupIndex].options[removedElement?.optionIndex].isSelected = false;
      }
      prevSelectedOptions.splice(index, 1);
      setSelectedOptions(prevSelectedOptions);
      setUnselectedOptions(prevUnselectctedOptions);
    }
  };

  const handleCheckboxClick = (event: React.MouseEvent) => {
    event.stopPropagation();
  };

  const handleClearFilter = (groupIndex: number, optionIndex: number, filter: FilterData | undefined) => {
    const prevUnselectctedOptions = [...unselectedOptions];
    const prevSelectedOptions = [...selectedOptions];
    const removedIndex = selectedOptions.findIndex(opt => opt.groupIndex === groupIndex && opt.optionIndex === optionIndex);
    if (groupIndex != undefined && optionIndex != undefined) {
      prevUnselectctedOptions[groupIndex].options[optionIndex].isSelected = false;
    }
    prevSelectedOptions.splice(removedIndex, 1);
    setSelectedOptions(prevSelectedOptions);
    setUnselectedOptions(prevUnselectctedOptions);
    const existingFilterIndex = filterData ? filterData?.findIndex((data) => data.field === filter?.field) : -1;
    if (existingFilterIndex !== -1) {
      const prevFilterData = [...filterData];
      prevFilterData.splice(existingFilterIndex, 1)
      setFilterData(prevFilterData)
    }
  }

  const handleOnchangeFilter = (filter: FilterData) => {
    const existingFilter = filterData?.find((data) => data.field === filter.field);
    if (existingFilter) {
      const index = filterData?.findIndex((data) => data?.field === filter.field);
      if (filter?.operand !== undefined && filter?.operand !== '' && filter?.operand?.length !== 0) {
        // If entry exists, update it
        const updatedFilterData = [...filterData];
        updatedFilterData[index] = {
          field: filter?.field,
          operand: filter?.operand,
          type: filter?.type,
          operator: filter?.operator
        };
        setFilterData(updatedFilterData);

      } else {
        const prevFilterData = [...filterData];
        prevFilterData.splice(index, 1)
        setFilterData(prevFilterData)
      }
    } else {
      //If entry not exists, Add new Entry
      if (filter?.operand !== undefined && filter?.operand !== '' && filter?.operand?.length !== 0) {
        const newFilterData: FilterData = {
          field: filter?.field,
          operand: filter?.operand,
          type: filter?.type,
          operator: filter?.operator
        };
        setFilterData(prevFilterData => [...prevFilterData, newFilterData]);
      }
    }

  }

  const handleSearchField = (searchKey: string) => {
    // setSelectedOptions(selectedOptions.filter(o => o?.label?.toLowerCase().includes(searchText?.toLowerCase())))
    // setUnselectedOptions(unselectedOptions.filter(o => o?.label?.toLowerCase().includes(searchText?.toLowerCase())))
    console.log('search key ::::: ', searchKey);
  }

  useEffect(() => {
  }, [selectedOptions, unselectedOptions]);

  useEffect(() => {
    filterData ? onChangeOptions(filterData) : {};
  }, [filterData]);

  return (
    <div className="add-filter-container">
      <div className="filters">
        {selectedOptions.map((opt, index) => (
          <div key={opt.value || index}>
            {(opt?.type === 'date_range' || opt?.type === 'status') && (
              <SingleSelect options={opt.filterOptions}
                type={opt?.type ? opt.type : ''}
                label={opt.label}
                value={opt?.value}
                onClear={handleClearFilter}
                groupIndex={opt.groupIndex}
                optionIndex={opt.optionIndex}
                onChangeFilter={handleOnchangeFilter}
                hideClearIcon={opt?.hideClearIcon as boolean}
                defaultSelected={opt?.defaultSelected}
              ></SingleSelect>
            )}

            {(opt?.type !== 'date_range' && opt?.type !== 'status') && (
              <FilterDropdown
                label={opt?.label}
                value={opt?.value}
                type={opt?.type}
                options={opt?.filterOptions}
                onClear={handleClearFilter}
                groupIndex={opt.groupIndex}
                optionIndex={opt.optionIndex}
                onChangeFilter={handleOnchangeFilter}
                defaultSelected={opt?.defaultSelected}
                hideClearIcon={opt?.hideClearIcon as boolean} ></FilterDropdown>
            )}
          </div>
        ))}

        {
          !hideAddFilter && (
            <div>
              <div className="add-filter">
                <Button
                  aria-describedby={id}
                  label="Add Filter"
                  startIcon={<AddCircleOutline />}
                  variant="outlined"
                  onClick={handleClick}
                />

                <Popover
                  className="add-filter-popover-wrapper"
                  id={id}
                  open={open}
                  anchorEl={anchorEl}
                  onClose={handleClose}
                  anchorOrigin={{
                    vertical: "bottom",
                    horizontal: "left",
                  }}
                >

                  <div className="search-field">
                    <TextField className="menu-padding "
                      variant="outlined"
                      size="small" onChange={(e) => handleSearchField(e.target.value)}
                    ></TextField>
                  </div>

                  <Divider></Divider>

                  <Accordion defaultExpanded className="accordion-wrapper">
                    <AccordionSummary
                      expandIcon={<ExpandMoreOutlined />}
                      aria-controls="panel1a-content"
                      id="panel1a-header"
                    >
                      <List>
                        <ListItem >
                          <div className="menu-padding group-header">{`SELECTION (${selectedOptions.length})`}</div>
                        </ListItem>
                      </List>
                    </AccordionSummary>
                    <AccordionDetails>

                      <List>

                        {selectedOptions.map((option, index) => (
                          <ListItem key={option.value} >
                            <FormControlLabel className="menu-padding"
                              control={
                                <Checkbox
                                  checked={true}
                                  onChange={() =>
                                    handleToggleOption(option, true, index, -1)
                                  }
                                  onClick={handleCheckboxClick}
                                />
                              }
                              label={option.label}
                            />
                          </ListItem>
                        ))}
                      </List>
                    </AccordionDetails>
                  </Accordion>
                  <Divider></Divider>
                  <List>
                    {unselectedOptions.map((option, index) => (
                      <div className="menu-padding" key={option.name || index}>
                        <div className="group-header">{option?.name}</div>
                        {option.options.map((option, index2) => (
                          !option?.isSelected && <ListItem key={option.label}>
                            <FormControlLabel className=""
                              control={
                                <Checkbox
                                  checked={false}
                                  onChange={() =>
                                    handleToggleOption(option, false, index, index2)
                                  }
                                />
                              }
                              label={option.label}
                            />
                          </ListItem>
                        ))}
                      </div>
                    ))}
                  </List>
                </Popover>
                <div className="clear-button">
                  <div className="vertical-divider">
                    <Divider className="divider-ver" orientation="vertical"></Divider>
                  </div>
                  <div className="clear-button-link" onClick={clearAllFilters}>
                    <CloseIcon></CloseIcon>
                    <div className='label'>Clear all filters</div>
                  </div>
                </div>
              </div>
            </div>
          )
        }
      </div>
    </div>
  );
};

export default AddFilter;