import { __ } from '@wordpress/i18n';
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import ProBadge from '../../../../../components/ProBadge';
import SectionContainer from '../../../../../components/SectionContainer';
import { changeBadgeBaseProperties } from '../../../../../features/badges/badgesSlice';
import useUniqueId from '../../../../../hooks/useUniqueId';
import cn from '../../../../../utils/cn';
import { defaultCountdownBadgeSettings, generateCountdownBadge } from '../../../../../utils/countdownBadge';
import {
  CUSTOM_BADGE_FIXED_PROPERTY,
  CUSTOM_BADGE_TEMPLATES,
  generateCustomBadgeHtml,
} from '../../../../../utils/customBadge';
import { generateHtmlBadgeHtml, htmlBadgeDefaultSettings } from '../../../../../utils/htmlBadge';
import { generateImageBadgeHtml, imageBadgeDefaultSettings } from '../../../../../utils/imageBadge';

const badgeType = {
  custom: 'Custom',
  image: 'Image/Icon',
  custom_html: 'Custom HTML',
  // countdown: 'Countdown',
};

const SelectBadgeType = () => {
  const customBadgeIdentifier = useUniqueId();
  const dispatch = useDispatch();
  const { badge_type, badge_settings, id } = useSelector((state) => state.badges);

  const handleBadgeType = (badge_type) => {
    dispatch(changeBadgeBaseProperties({ name: 'badge_type', value: badge_type }));
  };

  useEffect(() => {
    if (badge_type === 'custom' && !id) {
      dispatch(
        changeBadgeBaseProperties({
          name: 'badge_settings',
          value: { ...CUSTOM_BADGE_TEMPLATES[0], ...CUSTOM_BADGE_FIXED_PROPERTY },
        }),
      );
    }

    if (badge_type === 'image' && !id) {
      dispatch(changeBadgeBaseProperties({ name: 'badge_settings', value: { ...imageBadgeDefaultSettings } }));
    }
    if (badge_type === 'custom_html' && !id) {
      dispatch(changeBadgeBaseProperties({ name: 'badge_settings', value: { ...htmlBadgeDefaultSettings } }));
    }
    if (badge_type === 'countdown' && !id) {
      dispatch(changeBadgeBaseProperties({ name: 'badge_settings', value: { ...defaultCountdownBadgeSettings } }));
    }
  }, [badge_type]);

  useEffect(() => {
    if (badge_type === 'custom') {
      dispatch(
        changeBadgeBaseProperties({
          name: 'badge_style',
          value: generateCustomBadgeHtml(badge_settings, customBadgeIdentifier),
        }),
      );
    }
    if (badge_type === 'image') {
      dispatch(changeBadgeBaseProperties({ name: 'badge_style', value: generateImageBadgeHtml(badge_settings) }));
    }

    if (badge_type === 'custom_html') {
      dispatch(changeBadgeBaseProperties({ name: 'badge_style', value: generateHtmlBadgeHtml(badge_settings) }));
    }
    if (badge_type === 'countdown') {
      dispatch(changeBadgeBaseProperties({ name: 'badge_style', value: generateCountdownBadge(badge_settings) }));
    }
  }, [badge_settings]);

  return (
    <SectionContainer className='wmx-mt-6' title={__('Badge Type')}>
      <div className=' wmx-flex wmx-justify-center wmx-gap-4'>
        {Object.entries(badgeType).map(([key, value]) => (
          <button
            disabled={Boolean(id)}
            key={key}
            onClick={() => handleBadgeType(key)}
            className={cn(
              'wmx-bg-white wmx-relative wmx-font-semibold wmx-border !wmx-shadow-none wmx-border-gray-300 wmx-w-32 wmx-h-12 wmx-rounded-lg disabled:wmx-cursor-not-allowed !wmx-outline-none',
              {
                'wmx-bg-primary wmx-text-white wmx-border-primary': badge_type === key,
              },
            )}
          >
            {value}

            {key === 'custom_html' && <ProBadge />}
          </button>
        ))}
      </div>
    </SectionContainer>
  );
};
export default SelectBadgeType;
