import React, { useState } from 'react';
import './CharacterPalette.css';

const SYMBOL_PALETTE = {
  'Single Lines': {
    horizontal: '─',
    vertical: '│',
    topLeft: '┌',
    topRight: '┐',
    bottomLeft: '└',
    bottomRight: '┘',
    cross: '┼',
    tTop: '┴',
    tBottom: '┬',
    tLeft: '┤',
    tRight: '├'
  },
  'Double Lines': {
    horizontal: '═',
    vertical: '║',
    topLeft: '╔',
    topRight: '╗',
    bottomLeft: '╚',
    bottomRight: '╝',
    cross: '╬',
    tTop: '╩',
    tBottom: '╦',
    tLeft: '╣',
    tRight: '╠'
  },
  'Mixed Junctions': {
    crossSingleH: '╫',
    crossSingleV: '╪',
    doubleDownSingleH: '╤',
    doubleUpSingleH: '╧',
    doubleRightSingleV: '╟',
    doubleLeftSingleV: '╢'
  },
  'Rounded Corners': {
    topLeft: '╭',
    topRight: '╮',
    bottomLeft: '╰',
    bottomRight: '╯'
  },
  'Heavy Lines': {
    horizontal: '━',
    vertical: '┃',
    topLeft: '┏',
    topRight: '┓',
    bottomLeft: '┗',
    bottomRight: '┛'
  },
  'Common Symbols': {
    space: ' ',
    bullet: '•',
    dash: '–',
    equals: '=',
    underscore: '_',
    hash: '#'
  }
};

function CharacterPalette({ selectedChar, onSelectChar, onClose }) {
  const [expandedCategory, setExpandedCategory] = useState('Single Lines');

  const toggleCategory = (category) => {
    setExpandedCategory(prev => prev === category ? null : category);
  };

  return (
    <div className="character-palette">
      <div className="palette-header">
        <h3>Character Palette</h3>
        <button className="close-button" onClick={onClose} title="Close (Esc)">✕</button>
      </div>

      <div className="palette-content">
        {Object.entries(SYMBOL_PALETTE).map(([category, chars]) => (
          <div key={category} className="palette-category">
            <div
              className={`category-header ${expandedCategory === category ? 'expanded' : ''}`}
              onClick={() => toggleCategory(category)}
            >
              <span className="category-icon">{expandedCategory === category ? '▼' : '▶'}</span>
              <span className="category-name">{category}</span>
            </div>

            {expandedCategory === category && (
              <div className="character-grid">
                {Object.entries(chars).map(([name, char]) => (
                  <div
                    key={name}
                    className={`char-button ${selectedChar === char ? 'active' : ''}`}
                    onClick={() => onSelectChar(char)}
                    title={name.replace(/([A-Z])/g, ' $1').trim()}
                  >
                    {char}
                  </div>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

export default CharacterPalette;