import React, { FC } from 'react';
//local components
import {Pill} from '../../../Pill';
import { InfiniteListLoader } from '../../../InfiniteListLoader/InfiniteListLoader';

interface ValuesContainerProps {
    value: any, 
    dataShow: number, 
    textField: string, 
    extraOptionstextField: string, 
    onDelete: (value: any) => void
}

const ValuesContainer: FC<ValuesContainerProps> = ({
    value, 
    dataShow, 
    textField, 
    extraOptionstextField, 
    onDelete,
}) => {

    const pillsValues = value.slice(0, dataShow)

    const renderPill = (values:any, index:number, key:string) => {
        const pill = values[index]
        const label = pill[textField];
        let opts = [];
        if (pill.options) {
            opts = pill.options.map((option:any) => option[extraOptionstextField]);
        }
        const pillLabel =`${label}${opts.length > 0 && ":" || ""} ${opts.join(', ')}`

        return (
            <Pill
                key={`${key}-`+index}
                item={{id: index, label: pillLabel, color: "default-green"}}
                size='full'
                icon="cancel"
                onClickIcon={() => {
                    onDelete(pill);
                }}
            />
        )
    }

    return(
        <div className="gtc-rc-select-menu-file-container"  style={{display: "flex", flexDirection: "column"}}>
            <div style={{ width: "100%", height:"200px"}}>
                <InfiniteListLoader
                    values={pillsValues}
                    itemHeight={35}
                    extraRows={0}
                    renderItem={(values, index, key) => renderPill(values, index, key)}
                />
            </div>
        </div>
    );
}

export default ValuesContainer;