import { useEffect, useState } from 'react';
import { fetchIconCategories } from '../services/api';

function IconSelector({ onSelect }) {
  const [categories, setCategories] = useState({});
  const [selectedCategory, setSelectedCategory] = useState('');
  const [selectedIcon, setSelectedIcon] = useState('');

  useEffect(() => {
    fetchIconCategories().then(setCategories);
  }, []);

  const handleCategoryChange = (e) => {
    const category = e.target.value;
    setSelectedCategory(category);
    setSelectedIcon('');
    onSelect('');
  };

  const handleIconClick = (url) => {
    setSelectedIcon(url);
    onSelect(url);
  };

  return (
    <div style={{ marginBottom: '1rem' }}>
      <div style={{ marginBottom: '0.5rem' }}>
        <label style={{ fontWeight: 'bold', color: '#333' }}>Category:&nbsp;</label>
        <select
          value={selectedCategory}
          onChange={handleCategoryChange}
          style={{
            padding: '6px',
            borderRadius: '6px',
            border: '1px solid #ccc',
            fontSize: '14px',
          }}
        >
          <option value="">Select Category</option>
          {Object.keys(categories).map((cat) => (
            <option key={cat} value={cat}>
              {cat}
            </option>
          ))}
        </select>
      </div>

      {selectedCategory && (
        <div>
          <label style={{ fontWeight: 'bold', color: 'black' }}>Choose an icon:</label>
          <div
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fill, minmax(40px, 1fr))',
              gap: '10px',
              marginTop: '0.5rem',
              maxHeight: 120,
              overflowY: 'auto',
              padding: '6px',
              border: '1px solid #ddd',
              borderRadius: '6px',
              background: '#f9f9f9',
            }}
          >
            {categories[selectedCategory].map((url) => (
              <img
                key={url}
                src={url}
                alt=""
                title={url.split('/').pop()}
                onClick={() => handleIconClick(url)}
                style={{
                  width: 32,
                  height: 32,
                  cursor: 'pointer',
                  border: url === selectedIcon ? '2px solid #1976d2' : '2px solid transparent',
                  borderRadius: 4,
                  backgroundColor: '#fff',
                }}
              />
            ))}
          </div>
          {selectedIcon && (
            <p style={{ marginTop: 8, fontSize: 13, color: 'black' }}>
              Selected: <code>{selectedIcon.split('/').pop()}</code>
            </p>
          )}
        </div>
      )}
    </div>
  );
}

export default IconSelector;