import React, { memo } from 'react';
import { useMixersContext } from '../../context/MixersContext';
import { useJamClient } from '../../context/JamClientContext';
import SessionTrackVU from './SessionTrackVU';
import SessionTrackGain from './SessionTrackGain';
import './JKSessionMyTrack.css';
import computerIcon from '../../assets/img/instruments/icon_instrument_computer45_inverted.svg'

const JKSessionMetronome = memo(function JKSessionMetronome({
  mixers,
  onClose
}) {
  const mixerHelper = useMixersContext();
  const jamClient = useJamClient();
  const [showMenu, setShowMenu] = React.useState(false);

  console.log('JKSessionMetronome mixers:', mixers);

  const trackClasses = `session-track metronome-track has-mixer`;

  const handleClose = () => {
    console.log('JKSessionMetronome: Close clicked');
    if (onClose) {
      onClose();
    }
  };

  return (
    <div className={trackClasses}>
      <div className="session-track-contents">
        {/* Metronome Title */}
        <div className="track-title" style={{ textAlign: 'center', fontSize: '0.9rem', fontWeight: '500', color: '#666' }}>
          Metronome
        </div>

        {/* Metronome Icon */}
        <div
          className="track-instrument"
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            marginBottom: '65px'
          }}
        >
          <img
            height="55"
            src={computerIcon}
            width="55"
            alt="metronome"
            style={{
              borderRadius: '50%',
              padding: '8px',
              backgroundColor: '#f5f5f5',
              border: '2px solid #ddd'
            }}
            onError={(e) => {
              // Fallback if metronome icon doesn't exist
              e.target.src = {computerIcon};
            }}
          />
        </div>

        {/* 0db Label */}
        {/* <div style={{ textAlign: 'center', fontSize: '0.75rem', color: '#666', marginBottom: '8px' }}>
          0db
        </div> */}

        {/* Track Controls */}
        <div className="track-controls">
          {/* VU Meter and Gain Control - Horizontal */}
          <div className="vu-and-gain" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <SessionTrackVU
              orientation="horizontal"
              lightCount={11}
              lightWidth={25}
              lightHeight={15}
              side="best"
              mixers={mixers}
            />
            <SessionTrackGain
              mixers={mixers?.mixer}
              gainType="track"
              controlGroup="track"
              orientation="vertical"
            />
          </div>

          {/* Track Buttons - Three Dots Menu */}
          <div className="track-buttons">
            <div className="track-menu-container">
              <div className="track-menu-button" onClick={() => setShowMenu(!showMenu)}>
                ...
              </div>
              {showMenu && (
                <div className="track-menu">
                  <div
                    onClick={() => {
                      handleClose();
                      setShowMenu(false);
                    }}
                  >
                    Close
                  </div>
                </div>
              )}
            </div>
          </div>
          <br className="clearall" />
        </div>
        <br className="clearall" />
      </div>
    </div>
  );
});

JKSessionMetronome.displayName = 'JKSessionMetronome';

export default JKSessionMetronome;
