import { __ } from '@wordpress/i18n';
import { useDispatch, useSelector } from 'react-redux';
import ProBadge from '../../../../../components/ProBadge';
import SectionContainer from '../../../../../components/SectionContainer';
import { changeBadgeSettingProperties } from '../../../../../features/badges/badgesSlice';
import cn from '../../../../../utils/cn';

const animations = [
  { name: '', title: 'No Animation' },
  { name: 'wmx_pulse', title: 'Pulse' },
  { name: 'wmx_bounce', title: 'Bounce' },
  { name: 'wmx_wiggle', title: 'Wiggle' },
  { name: 'wmx_flash', title: 'Flash' },
  { name: 'wmx_swing', title: 'Swing' },
  { name: 'wmx_tilt', title: 'Tilt' },
  { name: 'wmx_flicker', title: 'Flicker' },
  { name: 'wmx_pulse_rotate', title: 'Pulse Rotate' },
];

const BadgeAnimations = () => {
  const dispatch = useDispatch();
  const badge_class = useSelector((state) => state.badges.badge_settings.class) || '';
  const handleSetAnimation = (value) => {
    dispatch(changeBadgeSettingProperties({ name: 'class', value }));
  };

  return (
    <SectionContainer className='wmx-mt-6 wmx-relative' title={__('Badge Animations')}>
      <div className='wmx-grid wmx-grid-cols-4 wmx-gap-3'>
        {animations.map((animation) => (
          <button
            key={animation.name}
            className={cn(
              'wmx-px-4 wmx-py-2.5 wmx-bg-white wmx-text-sm wmx-border !wmx-shadow-none wmx-border-gray-300 wmx-rounded-lg wmx-font-semibold !wmx-outline-none',
              {
                'wmx-bg-primary wmx-text-white wmx-border-primary': badge_class === animation.name,
              }
            )}
            onClick={() => handleSetAnimation(animation.name)}
          >
            {animation.title}
          </button>
        ))}
      </div>

      <p className='wmx-text-[15px] wmx-mt-4'>
        <span className='wmx-font-bold'>Note:</span> This is an experimental feature, so it might change as we improve
        it.
      </p>

      <ProBadge />
    </SectionContainer>
  );
};
export default BadgeAnimations;
