import { useState, useEffect } from '@wordpress/element';

interface ColorPickerNullableProps {
  value?: string | null;
  onChange?: (value: string | null) => void;
  clientId?: string;
}

/**
 * React color picker allowing null (no color).
 * Displays strikethrough for null state and optional text value.
 */
export const ColorPickerNullable: React.FC<ColorPickerNullableProps> = ({
  value = null,
  onChange,
  clientId,
}) => {
  const [color, setColor] = useState<string | null>(value);

  useEffect(() => {
    setColor(value);
  }, [value]);

  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newColor = e.target.value;
    setColor(newColor);
    onChange?.(newColor);
  };

  const handleClear = () => {
    setColor(null);
    onChange?.(null);
    // Fires custom event to reset model
    const event = new CustomEvent('press3d:colorClear', {
      bubbles: true,
      detail: { clientId }
    });
    document.dispatchEvent(event);
  };

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontFamily: 'sans-serif' }}>
      <div
        style={{
          position: 'relative',
          width: '40px',
          height: '32px',
          border: '1px solid #757575', // Darker border for better visibility
          borderRadius: '4px',
          overflow: 'hidden',
          backgroundColor: color || '#fff',
          flexShrink: 0,
        }}
      >
        {!color && (
          <div
            style={{
              position: 'absolute',
              inset: 0,
              // Distinct striped pattern without opacity to avoid "disabled" look
              background:
                'repeating-linear-gradient(45deg, #e0e0e0 0, #e0e0e0 4px, #fff 4px, #fff 8px)',
            }}
          />
        )}
        <input
          type="color"
          value={color || '#ffffff'}
          onChange={handleInput}
          style={{
            position: 'absolute',
            inset: 0,
            width: '100%',
            height: '100%',
            opacity: 0,
            cursor: 'pointer',
          }}
        />
      </div>

      <button
        type="button"
        onClick={handleClear}
        title="Erase color"
        style={{
          background: color ? '#dc3232' : 'none',
          border: color ? '1px solid #dc3232' : '1px solid #ccc',
          borderRadius: '4px',
          color: color ? '#fff' : '#999',
          cursor: 'pointer',
          fontSize: '16px',
          lineHeight: 1,
          padding: '0 2px',
          opacity: color ? 1 : 0.6,
          transition: 'all 0.2s',
        }}
        onMouseEnter={(e) => {
          if (color) {
            e.currentTarget.style.background = '#c92c2c';
            e.currentTarget.style.borderColor = '#c92c2c';
          } else {
            e.currentTarget.style.opacity = '1';
            e.currentTarget.style.color = '#333';
          }
        }}
        onMouseLeave={(e) => {
          if (color) {
            e.currentTarget.style.background = '#dc3232';
            e.currentTarget.style.borderColor = '#dc3232';
          } else {
            e.currentTarget.style.opacity = '0.6';
            e.currentTarget.style.color = '#999';
          }
        }}
      >
        ×
      </button>
    </div>
  );
};