<template>
<Row class="stream-info-container">
  <Col :span="12" justify="start" align="center">
    <TKText v-if="showNickName" color="#FFF">{{ nickName }}</TKText>
    <div v-show="!isMuted && volume">
      <Icon :size="24" :src="MicOnH5"></Icon>
    </div>
    <div v-show="isMuted">
      <Icon :size="24" :src="MicOffH5"></Icon> 
    </div>
  </Col>
  <Col :span="12" justify="end">
    <Button
      v-if="false"
      shape="circle"
      color="rgba(34, 38, 46, 0.7)"
      width="24px"
      height="24px"
      :iconSize="15"
      :iconSrc="SwitchCameraSrc"
      @click.capture.stop="handleClick"
    /> 
  </Col>
</Row>
</template>

<script lang="ts">
export default {
  options: {
    virtualHost: true
  }
}
</script>
  
<script setup lang="ts">
import { StreamInfoProps } from './StreamInfo';
import Row from "../../base/Layout/Row/Row.vue";
import Col from "../../base/Layout/Col/Col.vue";
import Icon from '../../base/Icon/Icon.vue';
import Button from '../../base/Button/Button.vue';
import TKText from '../../base/TKText/TKText.vue';
import { TUICallKitServer } from '../../../../TUICallService';
import MicOnH5 from '../../../assets/streamInfo/mobile/mic-on-h5.svg';
import MicOffH5 from '../../../assets/streamInfo/mobile/mic-off-h5.svg';
import SwitchCameraSrc from '../../../assets/button/mobile/switch-camera.svg';

defineProps(StreamInfoProps);

const handleClick = async () => {
  await TUICallKitServer.switchCamera();
};
</script>

<style lang="scss" scoped>
.stream-info-container {
  padding: 2px 5px;
}
</style>
