import { __ } from '@wordpress/i18n';
import { useDispatch, useSelector } from 'react-redux';
import Input from '../../../../../../components/Input';
import Label from '../../../../../../components/Label';
import SectionContainer from '../../../../../../components/SectionContainer';
import { changeBadgeSettingProperties } from '../../../../../../features/badges/badgesSlice';
import BadgeMargin from '../../Common/BadgeMargin';

const imageDimensions = {
  // height: 'Height',
  width: 'Size',
};

const ImageDimension = () => {
  const dispatch = useDispatch();
  const { badge_settings } = useSelector((state) => state.badges);

  const handleBadgeDimensionChange = (name, value) => {
    dispatch(changeBadgeSettingProperties({ name, value }));
  };

  return (
    <SectionContainer className='wmx-mt-6' title={__('Badge Dimensions')}>
      <div className='wmx-flex wmx-items-center wmx-gap-4'>
        <div className='wmx-flex wmx-gap-2'>
          {Object.entries(imageDimensions).map(([key, value]) => (
            <div key={key} className='wmx-flex wmx-flex-col wmx-gap-1'>
              <Label htmlFor={key}>{value}:</Label>
              <Input
                min={key !== 'margin' ? 0 : undefined}
                className='!wmx-outline-none wmx-w-36 focus:!wmx-shadow-none'
                id={key}
                type='number'
                value={badge_settings[key]}
                onChange={(e) => handleBadgeDimensionChange(key, e.target.value)}
              />
            </div>
          ))}
        </div>
        <BadgeMargin />
      </div>
    </SectionContainer>
  );
};
export default ImageDimension;
