import HangupSrc from '../../../assets/button/hangup.svg';
import CameraOpenSrc from '../../../assets/button/camera-open.svg';
import CameraCloseSrc from '../../../assets/button/camera-close.svg';
import MicrophoneOpenSrc from '../../../assets/button/microphone-open.svg';
import MicrophoneCloseSrc from '../../../assets/button/microphone-close.svg';
import SpeakerOpenSrc from '../../../assets/button/speaker-open.svg';
import SpeakerCloseSrc from '../../../assets/button/speaker-close.svg';
import UpSrc from '../../../assets/button/mobile/up.svg';
import MinimizeSrc from '../../../assets/button/mobile/minimize.svg';
import InviteUserSrc from '../../../assets/button/mobile/inviteUser.svg';

const initialStyle = {
  width: '40px',
  height: '40px',
  shape: 'circle',
  iconSize: 20,
  textColor: '#D5E0F2',
};

export const closedPanelUI = {
  microphone: {
    basicConfig: {
      ...initialStyle,
      color: '#FFFFFF',
      iconSrc: MicrophoneOpenSrc,
    },
    closedConfig: {
      ...initialStyle,
      color: '#6b758a4d',
      iconSrc: MicrophoneCloseSrc,
    },
  },
  speaker: {
    basicConfig: {
      ...initialStyle,
      color: '#FFFFFF',
      iconSrc: SpeakerOpenSrc,
    },
    closedConfig: {
      ...initialStyle,
      color: '#6b758a4d',
      iconSrc: SpeakerCloseSrc,
    },
  },
  camera: {
    basicConfig: {
      ...initialStyle,
      color: '#FFFFFF',
      iconSrc: CameraOpenSrc,
    },
    closedConfig: {
      ...initialStyle,
      color: '#6b758a4d',
      iconSrc: CameraCloseSrc,
    },
  },
  hangup: {
    basicConfig: {
      ...initialStyle,
      color: '#ED4651',
      iconSrc: HangupSrc,
    },
    loadingConfig: {
      ...initialStyle,
      color: '#ED4651',
      loadingWidth: '20px',
      loadingHeight: '20px',
    },
  },
  toggleButtonPanel: {
    basicConfig: {
      color: 'transparent',
      width: '40px',
      height: '40px',
      shape: 'circle',
      iconSize: 40,
      iconSrc: UpSrc,
    },
  },
  minimize: {
    basicConfig: {
      iconSize: 24,
      iconSrc: MinimizeSrc,
    },
  },
  inviteUser: {
    basicConfig: {
      ...initialStyle,
      color: '',
      width: '24px',
      height: '24px',
      shape: '',
      iconSize: 24,
      iconSrc: InviteUserSrc,
    },
  },
};