import React, { useState, useEffect, memo } from 'react';
import { useMixersContext } from '../../context/MixersContext';
import { useJamClient } from '../../context/JamClientContext';
import usePanHelpers from '../../hooks/usePanHelpers';
import SessionTrackVU from './SessionTrackVU';
import SessionTrackGain from './SessionTrackGain';
import TrackDiagnostics from './TrackDiagnostics';
import JKSessionPanModal from './JKSessionPanModal';
import { UncontrolledTooltip } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import './JKSessionMyTrack.css';
import backingTrackIcon from "../../icons/instruments/icon_instrument_default.svg"

const JKSessionBackingTrack = memo(function JKSessionBackingTrack({
  backingTrack,
  mixers,
  onClose
}) {
  const mixerHelper = useMixersContext();
  const jamClient = useJamClient();
  const { convertPanToPercent } = usePanHelpers();
  const [pan, setPan] = useState(0);
  const [showMenu, setShowMenu] = useState(false);
  const [showPanModal, setShowPanModal] = useState(false);

  console.log('JKSessionBackingTrack backingTrack:', backingTrack);

  useEffect(() => {
    if (mixers?.mixer) {
      setPan(mixers.mixer.pan || 0);
    }
  }, [mixers]);

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

  const panStyle = {
    transform: `rotate(${pan}deg)`,
    WebkitTransform: `rotate(${pan}deg)`
  };

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

  const getFileName = (backingTrack) => {
    if (!backingTrack) return 'Unknown File';

    // Extract filename from path or use provided name
    if (backingTrack.shortFilename) {
      return backingTrack.shortFilename;
    }
    if (backingTrack.filename) {
      return backingTrack.filename.split('/').pop().split('\\').pop();
    }
    return 'Audio File';
  };

  return (
    <div className={trackClasses}>
      <div className="disabled-track-overlay" />
      <div className="session-track-contents">
        {/* Track filename */}
        <div className="track-name" style={{
          textAlign: 'center',
          marginBottom: '4px',
          fontSize: '12px',
          fontWeight: '500',
          color: '#333',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
          maxWidth: '100%',
          padding: '0 4px'
        }}>
          {getFileName(backingTrack)}
        </div>

        {/* Instrument Icon */}
        <div
          className="track-instrument"
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            marginBottom: '65px'
          }}
        >
          <img
            height="45"
            src={backingTrack.instrumentIcon || backingTrackIcon }
            width="45"
            alt="instrument"
          />
        </div>

        {/* Controls */}
        <div className="track-controls">
          <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>

          <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={() => {
                      setShowPanModal(true);
                      setShowMenu(false);
                    }}
                  >
                    Pan...
                  </div>
                </div>
              )}
            </div>
          </div>
          <br className="clearall" />
        </div>
        <br className="clearall" />
      </div>

      {/* Pan Modal */}
      {showPanModal && (
        <JKSessionPanModal
          isOpen={showPanModal}
          toggle={() => setShowPanModal(false)}
          mixers={mixers}
        />
      )}
    </div>
  );
});

JKSessionBackingTrack.displayName = 'JKSessionBackingTrack';

export default JKSessionBackingTrack;