import React from 'react';
import { Form, LoadingSpinner } from '@theorchard/suite-components';
import cx from 'classnames';
import { isEmpty } from 'lodash-es';
import InfiniteScroll from 'src/components/shared/infinite-scroll';
import { DEFAULT_NO_RESULTS_MSG } from 'src/constants';

export interface ContributionItemListPropTypes {
    itemList: any[];
    listType: string;
    itemMoveList: any;
    setItemMoveList: (params: object) => void;
    totalCount: number;
    isLoading: boolean;
    handleFetchMore: () => void;
    filterCount: number;
    offset: number;
    setSelectAll: (val: boolean) => void;
    movingTo: boolean;
    movingToMessage: string;
    setSelectedContainer: any;
    isDisabled: boolean;
}

export const ContributionItemList: React.FC<ContributionItemListPropTypes> = ({
    itemList,
    listType,
    itemMoveList,
    setItemMoveList,
    totalCount,
    isLoading = false,
    handleFetchMore,
    filterCount,
    offset,
    setSelectAll,
    movingTo,
    movingToMessage,
    setSelectedContainer,
    isDisabled,
}) => {
    const actualItemListCount = Object.keys(itemList).length || 0;
    const selectedItemList =
        (listType in itemMoveList && itemMoveList[listType]) || [];

    const onCheckHandler = (e: any) => {
        setSelectAll(false);
        setSelectedContainer({ [listType]: true });
        let selectedItems: any = itemMoveList[listType] || [];
        if (e.target.checked)
            if (e.target.value === 'all') {
                selectedItems = itemList?.map(({ value }): any => value);
                setSelectAll(true);
                handleFetchMore();
            } else selectedItems.push(e.target.value);
        else if (e.target.value === 'all') {
            selectedItems = [];
        } else {
            const index = selectedItems.indexOf(e.target.value);
            if (index !== -1) selectedItems.splice(index, 1);
        }

        setItemMoveList({ ...itemMoveList, [listType]: selectedItems });
    };

    return (
        <div className={'ItemList-Items ' + listType}>
            <InfiniteScroll
                fetchMore={!isDisabled ? handleFetchMore : () => false}
                loading={isLoading && !isDisabled}
                count={offset}
                loadLimit={100}
                totalLimit={filterCount}
                totalResults={filterCount}
                scrollContainerClassName={listType}
                loaderSize={true}
            >
                <div className="ItemList-Item">
                    <input
                        checked={
                            actualItemListCount > 0 &&
                            selectedItemList.length === actualItemListCount
                        }
                        ref={(input: any) => {
                            /* eslint-disable no-param-reassign, max-len */
                            if (input)
                                input.indeterminate =
                                    selectedItemList.length > 0 &&
                                    selectedItemList.length <
                                        actualItemListCount;
                            /* eslint-enable no-param-reassign, max-len */
                        }}
                        className="ItemList-Checkbox"
                        data-testid={`ItemList-${listType}-Checkbox-All`}
                        disabled={
                            actualItemListCount === 0 ||
                            isLoading ||
                            isDisabled ||
                            movingTo
                        }
                        name="ItemList-Checkbox"
                        onChange={onCheckHandler}
                        type="checkbox"
                        value="all"
                    />
                    <span className="CheckboxLabel">
                        <div>
                            {'Contributions '}(
                            {filterCount < 0 ? '-' : filterCount} of{' '}
                            {totalCount})
                        </div>
                        {<LoadingSpinner show={isLoading && !isDisabled} />}
                    </span>
                </div>
                {movingTo && (
                    <div
                        className={cx({
                            'ItemList-Item-MovingTo': true,
                            IsEmpty: isEmpty(itemList),
                        })}
                    >
                        <LoadingSpinner show={true} testId="movingToSpinner" />
                        <div className="Message">{movingToMessage}</div>
                    </div>
                )}
                {!(isEmpty(itemList) && !isLoading) && !movingTo
                    ? itemList?.map((item: any, index: any) => (
                          <div
                              className={'ItemList-Item ' + index}
                              key={item.value}
                          >
                              <label>
                                  <Form.Control
                                      checked={selectedItemList.includes(
                                          item.value
                                      )}
                                      className="ItemList-Checkbox"
                                      data-testid={`ItemList-${listType}-Checkbox`}
                                      name="ItemList-Checkbox"
                                      onChange={onCheckHandler}
                                      type="checkbox"
                                      value={item.value}
                                      disabled={isLoading || isDisabled}
                                  />
                                  <span className="CheckboxLabel">
                                      <div>
                                          {item.label}
                                          <br />
                                          <span className="ContributionLabel">
                                              {item.value}
                                          </span>
                                      </div>
                                  </span>
                              </label>
                          </div>
                      ))
                    : !movingTo && (
                          <div className="NoResultsFound">
                              {DEFAULT_NO_RESULTS_MSG}
                          </div>
                      )}
            </InfiniteScroll>
        </div>
    );
};

export default ContributionItemList;