import { useCallStateHooks } from '@stream-io/video-react-sdk';

import {
  IconVideo,
  IconMicrophone,
  IconMicrophoneOff,
  IconVideoOff,
} from '@material-hu/icons/tabler';

import { useLokaliseTranslation } from 'src/utils/i18n';

import Toggle from 'src/components/dashboard/videoCall/controls/Toggle';

import ControlsContainer from './ControlsContainer';

const WebcamControls = () => {
  const { t } = useLokaliseTranslation('calls');
  const { useCameraState, useMicrophoneState } = useCallStateHooks();

  const {
    camera,
    isMute: cameraIsMute,
    hasBrowserPermission: hasPermissionCamera,
  } = useCameraState();
  const {
    microphone,
    isMute: microphoneIsMute,
    hasBrowserPermission: hasPermissionMicrophone,
  } = useMicrophoneState();

  return (
    <ControlsContainer>
      <Toggle
        onToggle={() => camera.toggle()}
        isOff={cameraIsMute}
        offText={t('TURN_CAMERA_ON')}
        onText={t('TURN_CAMERA_OFF')}
        permissionText={t('PERMISSION_TOOLTIP')}
        hasPermission={hasPermissionCamera}
        IconOff={IconVideoOff}
        IconOn={IconVideo}
        highlightOff
      />
      <Toggle
        onToggle={() => microphone.toggle()}
        isOff={microphoneIsMute}
        offText={t('TURN_MIC_ON')}
        onText={t('TURN_MIC_OFF')}
        permissionText={t('PERMISSION_TOOLTIP')}
        hasPermission={hasPermissionMicrophone}
        IconOff={IconMicrophoneOff}
        IconOn={IconMicrophone}
        highlightOff
      />
    </ControlsContainer>
  );
};

export default WebcamControls;