import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import { Button } from '../buttonv2/Buttonv2.component';
import { useCallback, useMemo } from 'react';
import { Box } from '../box/Box';
import { Icon } from '../icon/Icon.component';
const CustomButton = styled(Button) `
  ${(props) => !props.isVisible
    ? `
        display: none;
    `
    : ''}
`;
const isEmptyItem = (item) => item.key === '' && item.value === '';
export const AddButton = ({ index, items, insertEntry, disabled, iconStyle, }) => {
    const itemsLength = items.length;
    const itemsIndex = items[index];
    const itemsIndexKey = items[index].key;
    const itemsIndexValue = items[index].value;
    const isDisabled = useMemo(() => {
        if (itemsIndex && itemsIndexKey === '' && itemsIndexValue === '') {
            return true;
        }
        return disabled || false;
    }, [itemsIndex, itemsIndexKey, itemsIndexValue, disabled]);
    const isVisible = useMemo(() => {
        return !(itemsLength > 0 && index !== itemsLength - 1);
    }, [itemsLength, index]);
    const onClickFn = useCallback(() => {
        if (!(itemsLength > 0 && index !== itemsLength - 1)) {
            insertEntry();
        }
    }, [itemsLength, index, insertEntry]);
    return (_jsxs(_Fragment, { children: [!isVisible && _jsx(Box, { ml: 16 }), _jsx(CustomButton, { isVisible: isVisible, type: "button", variant: "outline", disabled: isDisabled, name: `addbtn${index}`, id: `addbtn${index}`, onClick: onClickFn, "aria-label": `Add${index}`, tooltip: {
                    overlay: 'Add',
                    placement: 'top',
                }, icon: _jsx(Icon, { name: "Add-plus" }) })] }));
};
export const SubButton = ({ index, items, deleteEntry, disabled, iconStyle, }) => {
    let isDisabled = disabled || false;
    if (items.length === 1 && isEmptyItem(items[0])) {
        isDisabled = true;
    }
    return (_jsx(Button, { variant: "danger", type: "button", disabled: isDisabled, "aria-label": `Remove${index}`, name: `delbtn${index}`, id: `delbtn${index}`, onClick: () => deleteEntry(index), tooltip: {
            overlay: 'Remove',
            placement: 'top',
        }, icon: _jsx(Icon, { name: "Remove-minus" }) }));
};
