import * as React from 'react';
import { Icon, Dropdown, Grid, Popup } from 'semantic-ui-react';
import { GlobalState } from '../../reducers';
import { AppState } from '../App';

const trigger = (
    <span>
      microphone
    </span>
  )

class MicControl extends React.Component {
    render() {
        const props = this.props as any
        const gs = this.props as GlobalState
        const appState = props.appState as AppState
        const inputAudioDevicesOpts=gs.inputAudioDevices!.map(info => { return { key: info.label, text: info.label, value: info.deviceId } })

        const muteIcon=appState.currentSettings.mute ?
        (
            <Popup
            trigger={
                <Icon.Group link onClick={() => { props.toggleMute() }}>
                    <Icon size="large" color='black' name='microphone' />
                    <Icon size="large" color='red' name='dont' />
                </Icon.Group>        
            }       
            content="unmute."
            />
        )
        :
        (
            <Popup
            trigger={
                <Icon size="large" name="microphone"  color="black" link onClick={() => { props.toggleMute() }}/>
            }
            content="mute."
            />
        )

        return (
            <Grid>
                <Grid.Row>
                    <Grid.Column >
                    {muteIcon}
                    <Dropdown
                        style={{paddingLeft:"10px"}}
                        pointing='top left'
                        options={inputAudioDevicesOpts}
                        trigger={trigger}
                        onChange={(e, { value }) => props.selectInputAudioDevice(value as string)}
                    />

                        {/* <List style={{paddingLeft:"15px",paddingTop:"0px",paddingBottom:"0px"}} link>
                            <List.Item as='a' active onClick={() => { props.toggleMute() }}><Icon name="ban" color={appState.currentSettings.mute ? "red" : "grey"} />Mute</List.Item>
                        </List>  */}



                    </Grid.Column>
                </Grid.Row>
            </Grid>            


        )
    }
}

export default MicControl;