import { useDispatch, useSelector } from 'react-redux';
import Input from '../../../../../components/Input';
import Label from '../../../../../components/Label';
import { changeBadgeSettingProperties } from '../../../../../features/badges/badgesSlice';
import useGetApplicableMargin from '../../../../../hooks/useGetApplicableMargin';

const BadgeMargin = () => {
  const badgeMargin = useGetApplicableMargin();
  const dispatch = useDispatch();
  const { badge_settings } = useSelector((state) => state.badges);

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

  return (
    <div className='wmx-flex wmx-items-center wmx-gap-2'>
      {badgeMargin.map((input) => (
        <div className='wmx-flex wmx-flex-col wmx-gap-0.5' key={input.value}>
          <Label>Margin {input.name === 'Vertical' ? 'X' : 'Y'}:</Label>
          <div className='wmx-flex wmx-gap-2'>
            <Input
              className='wmx-w-32'
              id={input.value}
              type='number'
              value={badge_settings[input.value]}
              placeholder={input.name}
              onChange={(e) => handleStyleChange(input.value, e.target.value)}
            />
          </div>
        </div>
      ))}
    </div>
  );
};
export default BadgeMargin;
