import React from "react";
import classnames from "classnames";

//strings

//actions

//components
import Container from "../../../Talk-ui-kit/src/container";
import Shape, {ShapeCircle} from "../../../Talk-ui-kit/src/shape";
import {MdVolumeUp} from "react-icons/md";

//styling
import style from "../../styles/app/CallBoxEqulizer.scss";

//statics

//functions


export default function ({participant, className, hollowerClassName, speakerClassName, customSize, ...other}) {
  const classNames = classnames({
    [style.CallBoxEqualizer]: true,
    [className]: className
  });
  const hollowerClassNames = classnames({
    [style.CallBoxEqualizer__Hollower]: true,
    [hollowerClassName]: hollowerClassName
  });
  const speakerClassNames = classnames({
    [style.CallBoxEqualizer__SpeakerController]: true,
    [style["CallBoxEqualizer__SpeakerController--show"]]: !participant?.mute && participant?.audioLevel > 0,
    [speakerClassName]: speakerClassName
  });
  const hollowerInlineStyle = customSize ? {width: `${customSize}px`, height: `${customSize}px`} : {};
  return <Container className={classNames}
                    {...other}>

    <Container className={hollowerClassNames} style={{
      //display: participant?.mute ? "none" : "block",
      ...hollowerInlineStyle,
      transform: !participant?.mute && participant?.audioLevel ? `scale(1.${participant?.audioLevel})` : "scale(1)"
    }}/>


    <Container className={speakerClassNames}>
      <Shape className={style.CallBoxEqualizer__SpeakerIconShapeContainer}
             color="accent">
        <ShapeCircle><MdVolumeUp size={style.iconSizeSm}
                                color={style.colorAccentDark}/></ShapeCircle>
      </Shape>

    </Container>


  </Container>
}