import React from 'react'
import styles from './ColumnSettings.module.css'

interface ColumnConfig {
  key: string
  label: string
  group: string
}

const COLUMN_CONFIGS: ColumnConfig[] = [
  // Basic Info
  { key: 'expand', label: 'Expand', group: 'Basic' },
  { key: 'method', label: 'Method', group: 'Basic' },
  { key: 'status', label: 'Status', group: 'Basic' },
  { key: 'type', label: 'Type', group: 'Basic' },
  { key: 'priority', label: 'Priority', group: 'Basic' },
  { key: 'url', label: 'URL', group: 'Basic' },
  
  // Connection Info
  { key: 'connectionNumber', label: 'Connection #', group: 'Connection' },
  { key: 'requestNumber', label: 'Request #', group: 'Connection' },
  
  // Timing
  { key: 'startTime', label: 'Start Time', group: 'Timing' },
  { key: 'queueTime', label: 'Queue Time', group: 'Timing' },
  { key: 'dns', label: 'DNS', group: 'Timing' },
  { key: 'connection', label: 'Connection', group: 'Timing' },
  { key: 'serverLatency', label: 'Server Latency', group: 'Timing' },
  { key: 'duration', label: 'Duration', group: 'Timing' },
  { key: 'totalResponseTime', label: 'Total Response Time', group: 'Timing' },
  
  // Size & Performance
  { key: 'dataRate', label: 'Data Rate', group: 'Performance' },
  { key: 'size', label: 'Size', group: 'Performance' },
  { key: 'contentLength', label: 'Content-Length', group: 'Performance' },
  
  // Advanced
  { key: 'protocol', label: 'Protocol', group: 'Advanced' },
  { key: 'cdn', label: 'CDN', group: 'Advanced' },
  { key: 'cache', label: 'Cache', group: 'Advanced' }
]

interface ColumnSettingsProps {
  visibleColumns: Record<string, boolean>
  onColumnToggle: (column: string) => void
  isOpen: boolean
  onToggle: () => void
  onShowAll: () => void
  onHideAll: () => void
  onResetDefaults: () => void
}

const ColumnSettings: React.FC<ColumnSettingsProps> = ({
  visibleColumns,
  onColumnToggle,
  isOpen,
  onToggle,
  onShowAll,
  onHideAll,
  onResetDefaults
}) => {
  const groups = [...new Set(COLUMN_CONFIGS.map(col => col.group))]
  
  return (
    <div className={styles.columnSettings}>
      <button 
        className={styles.toggleButton}
        onClick={onToggle}
        title="Column Settings"
      >
        ⚙️ Columns {isOpen ? '▼' : '▶'}
      </button>
      
      {isOpen && (
        <div className={styles.panel}>
          <div className={styles.panelHeader}>
            <h3>Column Visibility</h3>
            <div className={styles.bulkActions}>
              <button onClick={onShowAll} className={styles.bulkButton}>
                Show All
              </button>
              <button onClick={onHideAll} className={styles.bulkButton}>
                Hide All
              </button>
              <button onClick={onResetDefaults} className={styles.bulkButton}>
                Reset Defaults
              </button>
            </div>
          </div>
          
          <div className={styles.columnGroups}>
            {groups.map(group => (
              <div key={group} className={styles.columnGroup}>
                <h4 className={styles.groupTitle}>{group}</h4>
                <div className={styles.columnList}>
                  {COLUMN_CONFIGS
                    .filter(col => col.group === group)
                    .map(column => (
                      <label key={column.key} className={styles.columnItem}>
                        <input
                          type="checkbox"
                          checked={visibleColumns[column.key] || false}
                          onChange={() => onColumnToggle(column.key)}
                          className={styles.checkbox}
                        />
                        <span className={styles.columnLabel}>
                          {column.label}
                        </span>
                      </label>
                    ))
                  }
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

export default ColumnSettings