import React from 'react';
import { Alert } from '@theorchard/suite-components';
import { ContributionItemList } from 'src/components/schedule-form/contribution-item-list';
import { SearchField } from 'src/components/shared/search-field';
import { MoveItemsButton } from 'src/components/shared/swap-items/move-items-button';
import { UndoLink } from 'src/components/shared/swap-items/undo-link';
// This view renders swap-items' .ItemList / MoveItemsButton / UndoLink markup,
// whose structural styles live in swap-items' stylesheet. With per-route CSS
// (no global glob), import it here so those styles ship on this live route.
import 'src/components/shared/swap-items/styles.scss';

export interface ContributionItemsPropType {
    filterValues: any;
    setFilterValues: (params: object) => void;
    itemList: any[];
    forward: boolean;
    headerText: string;
    listType: string;
    message: string;
    onClickMoveTo: any;
    itemMoveList: any;
    setItemMoveList: (params: object) => void;
    totalCount: number;
    undoMessage: string;
    undoMovedList: any;
    undoHandler: any;
    areContributionsLoading: boolean;
    filterCount: number;
    fetchMore: () => void;
    unfilteredCount: number;
    setSelectAll: (variables: boolean) => void;
    movingFrom: boolean;
    movingTo: boolean;
    movingFromMessage: string;
    movingToMessage: string;
    setSelectedContainer: any;
    isDisabled: boolean;
    isInitialPageLoading: boolean;
}

export const ContributionItems: React.FC<ContributionItemsPropType> = ({
    filterValues,
    setFilterValues,
    itemList,
    forward,
    headerText,
    listType,
    message,
    onClickMoveTo,
    itemMoveList,
    setItemMoveList,
    totalCount,
    undoMessage,
    undoMovedList,
    undoHandler,
    areContributionsLoading,
    filterCount,
    fetchMore,
    unfilteredCount,
    setSelectAll,
    movingFrom,
    movingTo,
    movingFromMessage,
    movingToMessage,
    setSelectedContainer,
    isDisabled,
    isInitialPageLoading,
}) => {
    const setChangeHandler = (value: string) => {
        setSelectAll(false);
        setSelectedContainer({ [listType]: true });
        setFilterValues({
            ...filterValues,
            [listType]: { term: !value ? null : value, limit: 100, offset: 0 },
        });
        setItemMoveList({ ...itemMoveList, [listType]: [] }); // reset any selected items on search
    };

    const undoMovedItemsHandler = () => {
        undoHandler(listType);
        const resetList =
            listType in itemMoveList &&
            itemMoveList[listType]?.filter(
                (value: string) => !undoMovedList[listType].includes(value)
            );
        setItemMoveList({ ...itemMoveList, [listType]: resetList });
    };
    const onClickMoveToHandler = () => {
        onClickMoveTo(listType);
    };

    return (
        <div className="ItemList">
            <div className="ItemList-Header">
                <span className="ItemList-Header-Left">{headerText}</span>
            </div>
            <SearchField
                placeholder="Search by Contribution Name or ID"
                onHandleChange={setChangeHandler}
                searchInputName="Contributions"
                states={filterValues}
                setStates={setFilterValues}
                clearSearchField={false}
                isDisabled={isInitialPageLoading}
            />
            <ContributionItemList
                itemList={itemList}
                listType={listType}
                itemMoveList={itemMoveList}
                setItemMoveList={setItemMoveList}
                totalCount={totalCount}
                isLoading={areContributionsLoading}
                handleFetchMore={fetchMore}
                filterCount={filterCount}
                offset={unfilteredCount}
                setSelectAll={setSelectAll}
                movingTo={movingTo}
                movingToMessage={movingToMessage}
                setSelectedContainer={setSelectedContainer}
                isDisabled={isDisabled}
            />
            {listType in undoMovedList &&
                !movingTo &&
                undoMovedList[listType].length > 0 && (
                    <UndoLink
                        isDisabled={areContributionsLoading}
                        undoMessage={undoMessage}
                        undoHandler={undoMovedItemsHandler}
                    />
                )}
            {movingFrom && <Alert variant="warn" text={movingFromMessage} />}
            {listType in itemMoveList && itemMoveList[listType].length > 0 && (
                <MoveItemsButton
                    isDisabled={
                        areContributionsLoading || movingFrom || movingTo
                    }
                    message={message}
                    onClickMoveTo={onClickMoveToHandler}
                    selectedCount={itemMoveList[listType].length}
                    forward={forward}
                />
            )}
        </div>
    );
};

export default ContributionItems;