import React from "react";
import { TextChip } from "../TextFieldChip/TextFieldChip.styles";
import { StyledChips } from "../../TextField.styles";
import { classes } from "../../TextField.tokens";
import { StyledChip } from "./TextFieldChipNew.styles";
export const TextFieldChipNew = ({ chips, onChipCloseClick, getRef, handleChipKeyDown, onChipClear, readOnly, chipType, view, chipClickArea = 'full', _forceChipManipulationWithReadonly })=>{
    return /*#__PURE__*/ React.createElement(StyledChips, {
        className: classes.chipsWrapper
    }, chips.map(({ value, label, disabled }, index)=>{
        const chipId = `${index}_${value}`;
        const handleChipClick = (event)=>{
            event.stopPropagation();
        };
        const onKeyDownHandle = (event)=>{
            if (handleChipKeyDown) {
                handleChipKeyDown(event, chipId, index);
            }
            if (event.key === 'Enter' || event.key === 'Backspace') {
                if (onChipCloseClick) {
                    onChipCloseClick({
                        value,
                        label,
                        disabled
                    });
                }
            }
        };
        const handleCloseClick = (event)=>{
            event.stopPropagation();
            if (onChipCloseClick) {
                onChipCloseClick({
                    value,
                    label,
                    disabled
                });
            }
            if (onChipClear) {
                onChipClear(chipId, index);
            }
        };
        return chipType === 'default' ? /*#__PURE__*/ React.createElement(StyledChip, {
            key: chipId,
            ref: (element)=>getRef(element, index),
            tabIndex: -1,
            disabled: disabled,
            hasClear: !disabled,
            readOnly: readOnly,
            onKeyDown: onKeyDownHandle,
            onClear: ()=>onChipClear(chipId, index),
            text: label,
            view: view,
            chipClickArea: chipClickArea,
            ...chipClickArea === 'full' ? {
                onClick: handleCloseClick
            } : {
                onClick: handleChipClick,
                onClickClose: handleCloseClick
            },
            // TODO: #1547
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-ignore
            _forceChipManipulationWithReadonly: _forceChipManipulationWithReadonly
        }) : /*#__PURE__*/ React.createElement(TextChip, {
            tabIndex: -1,
            onClick: handleCloseClick,
            onKeyDown: onKeyDownHandle
        }, label);
    }));
};
