import { useDispatch } from 'react-redux';
import { changeBadgeBaseProperties } from '../../../../../../../../features/badges/badgesSlice';
import useUniqueId from '../../../../../../../../hooks/useUniqueId';
import { CUSTOM_BADGE_FIXED_PROPERTY, generateCustomBadgeHtml } from '../../../../../../../../utils/customBadge';
import { replaceWithDynamicValue } from '../../../../../../../../utils/utils';

const TemplateItem = ({ template }) => {
  const dispatch = useDispatch();
  const identifier = useUniqueId();
  const handleSelect = () => {
    dispatch(
      changeBadgeBaseProperties({
        name: 'badge_settings',
        value: { ...template, ...CUSTOM_BADGE_FIXED_PROPERTY },
      }),
    );
  };

  return (
    <div
      role='button'
      onClick={handleSelect}
      className='wmx-relative wmx-p-2 wmx-border wmx-border-gray-200 wmx-rounded-md wmx-flex wmx-justify-center wmx-items-center'
      dangerouslySetInnerHTML={{
        __html: replaceWithDynamicValue(generateCustomBadgeHtml(template, identifier))?.replace('absolute', 'static'),
      }}
    />
  );
};
export default TemplateItem;
