import {
    __experimentalToggleGroupControl as ToggleGroupControl,
    __experimentalToggleGroupControlOption as ToggleGroupControlOption, //@ts-ignore: Cannot find module '@wordpress/components' or its corresponding type declarations.
} from '@wordpress/components';

export default function BgSize({attributes, setAttributes, index}:any) {

    // if (!attributes.mediaGroups[index]?.images?.length) { // safely check if images is undefined or empty
    //     return (<></>);
    // }
    
    return (
        <ToggleGroupControl
            label="Background Size"
            value={attributes.mediaGroups[index].bgSize}
            onChange={(newValue:any)=>{
                const newMediaGroups =[...attributes.mediaGroups]
                newMediaGroups[index].bgSize=newValue
                setAttributes({mediaGroups: newMediaGroups})
            }}
            isBlock
            __nextHasNoMarginBottom
            __next40pxDefaultSize
        >
            <ToggleGroupControlOption value="contain" label="Contain" />
            <ToggleGroupControlOption value="cover" label="Cover" />
            <ToggleGroupControlOption value="custom" label="Custom" />
        </ToggleGroupControl>
    );
}