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

const positionsButtons = [
  { name: 'Top Left', value: 'top-left' },
  { name: 'Top Center', value: 'top-center' },
  { name: 'Top Right', value: 'top-right' },
  { name: 'Center Left', value: 'center-left' },
  { name: 'Center', value: 'center' },
  { name: 'Center Right', value: 'center-right' },
  { name: 'Bottom Left', value: 'bottom-left' },
  { name: 'Bottom Center', value: 'bottom-center' },
  { name: 'Bottom Right', value: 'bottom-right' },
];

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

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

    if (value === 'center') {
      ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'].forEach((margin) => {
        dispatch(changeBadgeSettingProperties({ name: margin, value: 0 }));
      });
    }
  };

  return (
    <SectionContainer className='wmx-mt-6 ' title={__('Badge Position')}>
      <div className='wmx-grid wmx-grid-cols-3 wmx-gap-3 '>
        {positionsButtons.map((button) => (
          <button
            key={button.value}
            onClick={() => handleBadgePositionChange('position', button.value)}
            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_settings.position === button.value,
              },
            )}
          >
            {button.name}
          </button>
        ))}
      </div>
      <div className='wmx-mt-3 wmx-flex wmx-gap-1.5 -wmx-mb-1'>
        <InformationCircleIcon className='wmx-size-6 -wmx-mt-0.5' />
        <p className='wmx-text-sm wmx-text-gray-600'>
          If badges are not positioned correctly on your theme, enable Badge Position Compatibility Mode in the
          settings.
        </p>
      </div>
    </SectionContainer>
  );
};
export default BadgePosition;
