import { useDispatch, useSelector } from 'react-redux';
import Input from '../../../../../../components/Input';
import Label from '../../../../../../components/Label';
import { changeBadgeSettingProperties } from '../../../../../../features/badges/badgesSlice';
import cn from '../../../../../../utils/cn';

const borderRadiusInputs = [
  { name: 'Top-Left Radius', value: 'borderTopLeftRadius' },
  { name: 'Top-Right Radius', value: 'borderTopRightRadius' },
  { name: 'Bottom-Right Radius', value: 'borderBottomRightRadius' },
  { name: 'Bottom-Left Radius', value: 'borderBottomLeftRadius' },
];

const customDimensions = {
  height: 'Height',
  width: 'Width',
  borderWidth: 'Border Width',
};

const paddings = {
  paddingTop: 'Top',
  paddingRight: 'Right',
  paddingBottom: 'Bottom',
  paddingLeft: 'Left',
  borderWidth: 'Border Width',
};

const dimensionType = {
  'Dimension By Height/Width': false,
  'Dimension By Padding': true,
};

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

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

  return (
    <div className='wmx-border wmx-border-gray-300 wmx-rounded-lg wmx-p-3'>
      <div className='wmx-inline-flex wmx-items-center wmx-rounded-lg wmx-mb-2 wmx-overflow-hidden wmx-border wmx-border-gray-300'>
        {Object.entries(dimensionType).map(([key, value]) => (
          <button
            key={key}
            onClick={() => {
              handleBadgeSetting('padding', value);
            }}
            className={cn('wmx-px-4 wmx-py-1.5 wmx-text-sm wmx-font-semibold wmx-bg-white wmx-outline-none', {
              'wmx-bg-primary wmx-text-white': dimensionType[key] === badge_settings.padding,
            })}
          >
            {key}
          </button>
        ))}
      </div>
      <div className='wmx-flex wmx-items-center wmx-gap-4'>
        {badge_settings.padding ? (
          <div className='wmx-flex wmx-w-full wmx-gap-2'>
            {Object.entries(paddings).map(([key, value]) => (
              <div key={key} className='wmx-flex wmx-w-full  wmx-flex-col wmx-gap-1'>
                <Label htmlFor={key}>{value}:</Label>
                <Input
                  min={0}
                  className={cn('!wmx-outline-none wmx-w-full focus:!wmx-shadow-none', {})}
                  id={key}
                  type='number'
                  value={badge_settings[key]}
                  onChange={(e) => handleBadgeSetting(key, e.target.value)}
                />
              </div>
            ))}
          </div>
        ) : (
          <div className='wmx-flex wmx-w-full wmx-gap-2'>
            {Object.entries(customDimensions).map(([key, value]) => (
              <div key={key} className='wmx-flex wmx-w-full wmx-flex-col wmx-gap-1'>
                <Label htmlFor={key}>{value}:</Label>
                <Input
                  min={key !== 'margin' ? 0 : undefined}
                  className='!wmx-outline-none wmx-w-full focus:!wmx-shadow-none'
                  id={key}
                  type='number'
                  value={badge_settings[key]}
                  onChange={(e) => handleBadgeSetting(key, e.target.value)}
                />
              </div>
            ))}
          </div>
        )}
      </div>
      <div className='wmx-flex wmx-flex-col wmx-gap-0.5 wmx-mt-3'>
        <Label>Border Radius:</Label>
        <div className='wmx-flex wmx-gap-2'>
          {borderRadiusInputs.map((item) => (
            <Input
              className='wmx-w-full'
              key={item.value}
              id={item.value}
              type='number'
              value={badge_settings[item.value]}
              placeholder={item.name}
              onChange={(e) => handleBadgeSetting(item.value, e.target.value)}
            />
          ))}
        </div>
      </div>
    </div>
  );
};
export default BadgeDimension;
