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 { changeBadgeSettingProperties } from '../../../../../../features/badges/badgesSlice';
import { clipPaths } from '../../../../../../utils/badgeUtils';
import cn from '../../../../../../utils/cn';
import ClippingPathGenerator from './ClippingPathGenerator';

const BadgeShape = () => {
  const dispatch = useDispatch();

  const { clipKey, clipValue, background } = useSelector((state) => state.badges.badge_settings);
  const handleBadgeSettingChange = (name, value) => {
    dispatch(changeBadgeSettingProperties({ name, value }));
  };
  useEffect(() => {
    if (clipKey && !clipValue) {
      dispatch(changeBadgeSettingProperties({ name: 'clipValue', value: clipPaths[Number(clipKey)] }));
    }
  }, [clipKey, clipValue]);

  return (
    <SectionContainer className='wmx-mt-6 wmx-relative' title={__('Badge Shape')}>
      <div className='wmx-flex wmx-items-start'>
        <div className='wmx-flex wmx-text-center wmx-flex-wrap wmx-justify-center wmx-gap-3'>
          {clipPaths.map((value, idx) => (
            <button
              key={idx}
              onClick={() => handleBadgeSettingChange('clipValue', value)}
              className={cn(
                'wmx-border wmx-p-1.5 2xl:wmx-h-14 2xl:wmx-w-28 wmx-h-12 wmx-w-20 !wmx-shadow-none !wmx-outline-none wmx-rounded-lg wmx-border-gray-300',
                {
                  'wmx-relative wmx-border-primary': clipValue === value,
                }
              )}
              dangerouslySetInnerHTML={{
                __html: `<div style='display:flex; align-items: center; justify-content: center; font-weight: 700; height: 100%; width: 100%; background: #d1d5db; clip-path: ${value}'>${
                  value === null ? 'None' : ''
                }</div>`,
              }}
            ></button>
          ))}
          <button
            onClick={() => handleBadgeSettingChange('clipValue', 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)')}
            className={cn(
              'wmx-border wmx-p-1.5 2xl:wmx-h-14 2xl:wmx-w-28 wmx-h-12 wmx-w-20 !wmx-shadow-none !wmx-outline-none wmx-rounded-lg wmx-border-gray-300',
              {
                'wmx-relative wmx-border-primary': !clipPaths.includes(clipValue),
              }
            )}
            dangerouslySetInnerHTML={{
              __html: `<div style='display:flex; align-items: center; justify-content: center; font-weight: 700; height: 100%; width: 100%; background: #d1d5db;'>${'Custom'}</div>`,
            }}
          ></button>
        </div>
        {clipValue !== null && (
          <div>
            <ClippingPathGenerator
              editorBackgroundColor={background}
              clippingPath={clipValue}
              onChange={(value) => handleBadgeSettingChange('clipValue', value)}
            />
          </div>
        )}
      </div>
      <ProBadge />
    </SectionContainer>
  );
};
export default BadgeShape;
