/**
 * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */

import React, { useContext } from 'react';


import style from './index.module.css';
import LockMicroIcon from '/icons/lockmicrophone.png';
import MicroIcon from '/icons/microphone.png';
import HandleOffIcon from '/icons/handoff.png';

import { RealtimeClientContext } from '../Provider/RealtimeClientProvider';
import { useSignalRConnection } from '@/hooks/useMicrosoftSignal';
import { useSearchParams } from 'react-router-dom';




function AudioController({className, ...rest}: React.HTMLAttributes<HTMLDivElement>) {

  const {handleDisconnect,toggleMicrophone,audioEnabled,isAiTalking,handleInterrupt,roomInfo} = useContext(RealtimeClientContext)

  const [searchParams] = useSearchParams();
  useSignalRConnection({access_token:searchParams.get('token') ||'',roomId:roomInfo?.roomId || ''})



  return (
    <div className={`flex items-center justify-center bg-white pb-[20px] pt-[10px] gap-[10px]`} {...rest}>
      <div className={`${style.microphoneWrapper}`} onClick={handleDisconnect}>
        <img src={HandleOffIcon} alt="handoff" />
        <div>挂断</div>
      </div>
      <div className={`${style.microphoneWrapper}`} onClick={toggleMicrophone}>
        <img src={audioEnabled ? MicroIcon : LockMicroIcon} alt="lock" />
        <div>{audioEnabled ? '关麦' : '开麦'}</div>
      </div>

      <div className={`${style.talkWrapper}`} onClick={handleInterrupt}>
        <div className={`${isAiTalking ? style.isTalking : ''} ${style.listenerDot}`}>
          <span style={{ '--d': '2' } as React.CSSProperties} />
          <span style={{ '--d': '1' } as React.CSSProperties} />
          <span style={{ '--d': '0' } as React.CSSProperties} />
          <span style={{ '--d': '1' } as React.CSSProperties} />
          <span style={{ '--d': '2' } as React.CSSProperties} />
        </div>
        <div>{isAiTalking ? '点击打断' : '正在听'}</div>
      </div>
    </div>
  );
}

export default AudioController;
