import React, { useState } from 'react';
import cn from 'classnames';
import { Icon } from 'UI';
import { Button } from 'antd';
import type { LocalStream } from 'Player';
import stl from './ChatControls.module.css';

interface Props {
  stream: LocalStream | null;
  endCall: () => void;
  videoEnabled: boolean;
  isPrestart?: boolean;
  setVideoEnabled: (isEnabled: boolean) => void;
}
function ChatControls({
  stream,
  endCall,
  videoEnabled,
  setVideoEnabled,
  isPrestart,
}: Props) {
  const [audioEnabled, setAudioEnabled] = useState(true);

  const toggleAudio = () => {
    if (!stream) {
      return;
    }
    setAudioEnabled(stream.toggleAudio());
  };

  const toggleVideo = () => {
    if (!stream) {
      return;
    }
    stream.toggleVideo().then((v) => setVideoEnabled(v));
  };

  /** muting user if he is auto connected to the call */
  React.useEffect(() => {
    if (isPrestart) {
      audioEnabled && toggleAudio();
    }
  }, []);

  return (
    <div
      className={cn(
        stl.controls,
        'flex items-center w-full justify-start bottom-0 px-2',
      )}
    >
      <div className="flex items-center gap-2">
        <div className={cn(stl.btnWrapper, { [stl.disabled]: audioEnabled })}>
          <Button
            size="small"
            variant="text"
            onClick={toggleAudio}
            icon={<Icon name={audioEnabled ? 'mic' : 'mic-mute'} size="16" />}
          >
            <span
              className={cn('ml-1 color-gray-medium text-sm', {
                'color-red': audioEnabled,
              })}
            >
              {audioEnabled ? 'Mute' : 'Unmute'}
            </span>
          </Button>
        </div>

        <div className={cn(stl.btnWrapper, { [stl.disabled]: videoEnabled })}>
          <Button
            size="small"
            variant="text"
            onClick={toggleVideo}
            icon={
              <Icon
                name={videoEnabled ? 'camera-video' : 'camera-video-off'}
                size="16"
              />
            }
          >
            <span
              className={cn('ml-1 color-gray-medium text-sm', {
                'color-red': videoEnabled,
              })}
            >
              {videoEnabled ? 'Stop Video' : 'Start Video'}
            </span>
          </Button>
        </div>
      </div>
      <div className="ml-auto">
        <button className={stl.endButton} onClick={endCall}>
          END
        </button>
      </div>
    </div>
  );
}

export default ChatControls;