import React, { useState, useEffect, memo } from 'react';
import {
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Button,
  Input,
  Label,
} from 'reactstrap';
import usePanHelpers from '../../hooks/usePanHelpers';
import { useMixersContext } from '../../context/MixersContext';

const JKSessionPanModal = memo(function JKSessionPanModal({ isOpen, toggle, mixers }) {
  const { convertPanToPercent, convertPercentToPan } = usePanHelpers();
  const mixerHelper = useMixersContext();
  const [panPercent, setPanPercent] = useState(50); // Center position

  useEffect(() => {
    if (isOpen && mixers?.mixer) {
      const currentPan = mixers.mixer.pan || 0;
      const percent = convertPanToPercent(currentPan);
      setPanPercent(percent);
    }
  }, [isOpen, mixers, convertPanToPercent]);

  const handlePanChange = async (e) => {
    const newPercent = parseInt(e.target.value);
    setPanPercent(newPercent);

    if (mixers?.mixer) {
      await mixerHelper.setMixerPan(mixers.mixer, newPercent);
    }
  };

  const handleSave = () => {
    toggle();
  };

  const handleCancel = () => {
    toggle();
  };

  const getPanLabel = () => {
    if (panPercent < 50) {
      return `Left ${50 - panPercent}%`;
    } else if (panPercent > 50) {
      return `Right ${panPercent - 50}%`;
    } else {
      return 'Center';
    }
  };

  return (
    <Modal isOpen={isOpen} toggle={handleCancel} modalClassName="theme-modal" contentClassName="border" size="md">
      <ModalHeader toggle={handleCancel} className="bg-light d-flex flex-between-center border-bottom-0">
        Adjust Pan
      </ModalHeader>
      <ModalBody>
        <div className="text-center">
          <Label for="pan-slider" className="">
            {getPanLabel()}
          </Label>

          <div className="d-flex justify-content-between mb-1">
            <Label className=" mr-1">Left</Label>
            <Input
              type="range"
              id="pan-slider"
              min="0"
              max="100"
              value={panPercent}
              onChange={handlePanChange}
              className="form-control-range"
              style={{ width: '100%' }}
            />
            <Label className="ml-1">Right</Label>
          </div>


          {/* <div className="d-flex justify-content-between mt-2">
            <small className="text-muted">Left</small>
            <small className="text-muted">Center</small>
            <small className="text-muted">Right</small>
          </div> */}
        </div>
        <div className='px-3'>
          <small className="text-muted">
            Use the slider to pan the audio mix of this track left or right in your personal mix.
          </small>
          <small className="text-muted">This only affects what you hear, not what others hear.</small>
          <small className="text-muted">Your personal mix is used for your in-session audio, recording, and broadcasts.</small>
        </div>
      </ModalBody>
      <ModalFooter>
        <Button color="secondary" onClick={handleCancel}>
          Close
        </Button>
      </ModalFooter>
    </Modal>
  );
});

JKSessionPanModal.displayName = 'JKSessionPanModal';

export default JKSessionPanModal;
