import styles from './styles.module.css';
import { Mic } from '@mui/icons-material';

const RecorderControl: React.FC<{
  status: string;
  onClick?: () => void;
  includeDiv?: boolean;
  tapToSpeak?: boolean;
  primaryColor: string;
  primaryDarkColor: string;
}> = ({ status, onClick, includeDiv = true, tapToSpeak = false, primaryColor, primaryDarkColor }) => {
  const handleClick = () => {
    if (onClick) {
      onClick();
    }
  };

  let customStylesPulse;
  let customStylesProcess;
  let classPulse = '';
  let classProcess = '';

  if (status === 'error') {
    customStylesPulse = {
      background: 'red',
      border: '5px solid red',
    };
    classPulse = styles.pulseRing;
  } else if (status === 'recording') {
    customStylesPulse = {
      background: primaryColor,
      border: `5px solid ${primaryColor}`,
    };
    classPulse = styles.pulseRing;
  } else if (status === 'processing') {
    customStylesProcess = {
      borderColor: `transparent transparent ${primaryDarkColor} ${primaryDarkColor}`,
    };
    classProcess = styles.loader;
  }

  return includeDiv ? (
    <div className={styles.container}>
      <button
        onClick={handleClick}
        className={styles.btn}
        style={{
          cursor: 'pointer',
          backgroundColor: primaryColor,
          border: `1px solid ${primaryColor}`,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <div
          className={`${classPulse}`}
          style={{
            ...customStylesPulse,
          }}
        ></div>
        <Mic
          sx={{
            color: 'white',
            display: 'block',
          }}
        />
        <div
          className={`${classProcess}`}
          style={{
            ...customStylesProcess,
          }}
        ></div>
      </button>
      {tapToSpeak && (
        <p style={{ color: 'black', fontSize: '12px', marginTop: '4px' }}>{'label.tap_to_speak'}</p>
      )}
    </div>
  ) : (
    <button
      onClick={handleClick}
      className={styles.btn}
      style={{
        cursor: 'pointer',
        background: primaryColor,
        border: `1px solid ${primaryColor}`,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <div
        className={`${classPulse}`}
        style={{
          ...customStylesPulse,
        }}
      ></div>
      <Mic
        sx={{
          color: 'white',
          display: 'block',
        }}
      />
      <div
        className={`${classProcess}`}
        style={{
          ...customStylesProcess,
        }}
      ></div>
    </button>
  );
};

export default RecorderControl;