import React from 'react';
import add from '../../../../assets/images/plus_small.svg'
import remove from '../../../../assets/images/minus_small.svg'

interface IterableSectionControlsProps {
    iterableCount: number;
    iterLength: number;
    sec: any;
    secIndex: number;
    dispatch: React.Dispatch<any>;
}

const IterableSectionControls: React.FC<IterableSectionControlsProps> = ({
                                                                             iterableCount,
                                                                             iterLength,
                                                                             sec,
                                                                             secIndex,
                                                                             dispatch,
                                                                         }) => {
    const handleRemove = () => {
        dispatch({
            type: 'remove_iterable_section',
            section: sec,
            sec_i: secIndex,
            iterable_count: iterableCount,
        });
    };

    const handleAdd = () => {
        dispatch({
            type: 'add_iterable_section',
            section: sec,
            sec_i: secIndex,
        });
    };

    return (
        <div className="iterable-section-control">
            {iterLength > 1 && (
                <div className="remove-section" onClick={handleRemove}>
                    <img src={remove} alt="Remove" />
                </div>
            )}
            {iterableCount === iterLength - 1 && (
                <div className="add-section" onClick={handleAdd}>
                    <img src={add} alt="Add" />
                </div>
            )}
        </div>
    );
};

export default IterableSectionControls;