import { useCallback, useEffect, useMemo, useState } from 'react';
import { Story } from '@storybook/react';

import {
  MenuItem,
  processDropdownMenuItemsRecursive,
  toggleClickedDropdownMenuItem
} from '../../../../dropdown-menu';
import type { DropDownMenuProps } from '../../../../dropdown-menu';

import { Select } from '../../../../@forms/select';
import type { SelectProps } from '../../../../@forms/select';

const MENU_CHECKBOX_SHOW_DELETED_NAME = 'Show deleted members';

export const NestedShowDeletedTemplate: Story<SelectProps> = args => {
  const listItems = args.menuContentProps.listItems;
  const [selectItems, setSelectItems] = useState(listItems);
  const [showDeleted, setShowDeleted] = useState(true);

  const multipleSelectValues = useMemo(() => {
    const values: string[] = [];
    processDropdownMenuItemsRecursive(selectItems, item => {
      if (item.selected) values.push(item?.name?.toString() || '');
    });
    return values;
  }, [selectItems]);

  const [multipleDisplayListItems, setMultipleDisplayListItems] = useState(selectItems);
  const [secondaryMultipleListItems, setSecondaryMultipleListItems] = useState(selectItems);

  const handleMultipleValuesChange: NonNullable<DropDownMenuProps['handleClick']> =
    newValue => () => {
      const newListItems = processDropdownMenuItemsRecursive(selectItems, item => {
        const isClickedItem: boolean = item.name === newValue;
        const newItem = toggleClickedDropdownMenuItem(isClickedItem)(item);
        return newItem;
      });
      const multipleListItems = processDropdownMenuItemsRecursive(multipleDisplayListItems, item =>
        toggleClickedDropdownMenuItem(item.name === newValue)(item)
      );
      setSelectItems(newListItems);
      setMultipleDisplayListItems(multipleListItems);
      setSecondaryMultipleListItems(multipleListItems);
    };

  const handleSelectClear = useCallback(() => {
    const newListItems = processDropdownMenuItemsRecursive(selectItems, item => ({
      ...item,
      selected: false
    }));
    setSelectItems(newListItems);
    setMultipleDisplayListItems(newListItems);
  }, [selectItems]);

  const handleShowDeletedClick: NonNullable<DropDownMenuProps['handleClick']> = useCallback(
    newValue => () => setShowDeleted(!showDeleted),
    [showDeleted]
  );

  useEffect(() => {
    const processedListItems = processDropdownMenuItemsRecursive(selectItems, item => ({
      ...item,
      hidden: !item.options && (!showDeleted ? item.checkboxProps?.disabled : false)
    }));
    setMultipleDisplayListItems(processedListItems);
  }, [selectItems, showDeleted]);

  const InsertBeforeList = useCallback(
    () => (
      <MenuItem
        name={MENU_CHECKBOX_SHOW_DELETED_NAME}
        multiple
        selected={showDeleted}
        handleClick={handleShowDeletedClick}
      />
    ),
    [handleShowDeletedClick, showDeleted]
  );

  return (
    <Select
      {...args}
      value={multipleSelectValues}
      menuContentProps={{
        ...args.menuContentProps,
        listItems: multipleDisplayListItems,
        InsertBeforeList,
        defaultListItems: secondaryMultipleListItems,
        handleClick: handleMultipleValuesChange,
        clearSelectItems: handleSelectClear
      }}
    />
  );
};