import React, { useEffect } from 'react';
import { Form } from '@theorchard/suite-components';
import { isEmpty } from 'lodash-es';
import { DEFAULT_NO_RESULTS_MSG } from 'src/constants';

export interface ItemListPropTypes {
    onMoveClearSelection: string;
    itemList: [];
    searchInputName: string;
    listType: string;
    itemMoveList: any;
    setItemMoveList: any;
    checkedItemsArray: any;
    setCheckedItemsArray: any;
    totalCount: number;
}

export const ItemList: React.FC<ItemListPropTypes> = ({
    onMoveClearSelection,
    itemList,
    searchInputName,
    listType,
    itemMoveList,
    setItemMoveList,
    checkedItemsArray,
    setCheckedItemsArray,
    totalCount,
}) => {
    const actualItemListCount = Object.keys(itemList).length || 0;
    const selectedItemList =
        (listType in checkedItemsArray && checkedItemsArray[listType]) || [];

    const onCheckHandler = (e: any) => {
        let selectedItems: any = checkedItemsArray[listType] || [];
        if (e.target.checked)
            if (e.target.value === 'all')
                selectedItems = itemList?.map(({ value }): any => value);
            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 });
        setCheckedItemsArray({
            ...checkedItemsArray,
            [listType]: selectedItems,
        });
    };

    useEffect(() => {
        if (onMoveClearSelection !== '')
            setCheckedItemsArray({
                ...checkedItemsArray,
                [onMoveClearSelection]: [],
            });
    }, [onMoveClearSelection]);

    return (
        <div className="ItemList-Items">
            <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}
                    name="ItemList-Checkbox"
                    onChange={onCheckHandler}
                    type="checkbox"
                    value="all"
                />
                <span className="CheckboxLabel">
                    {searchInputName} ({actualItemListCount} of {totalCount})
                </span>
            </div>
            {!isEmpty(itemList) ? (
                itemList?.map((item: any) => (
                    <div className="ItemList-Item" 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}
                            />
                            <span className="CheckboxLabel">{item.label}</span>
                        </label>
                    </div>
                ))
            ) : (
                <div className="NoResultsFound">{DEFAULT_NO_RESULTS_MSG}</div>
            )}
        </div>
    );
};

export default ItemList;