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

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


class SpeakerControl extends React.Component {

    render() {
        const props = this.props as any
        const gs = this.props as GlobalState
        const appState = props.appState as AppState
        const outputAudioDevicesOpts=gs.outputAudioDevices!.map(info => { return { key: info.label, text: info.label, value: info.deviceId } })

        const enableIcon=appState.currentSettings.speakerEnable ?
        (
            <Popup
            trigger={
                <Icon size="large" name="sound"  color="black" link onClick={() => { props.toggleSpeaker() }}/>
            }
            content="disable."
            />
        )
        :
        (
            <Popup
            trigger={
                <Icon.Group link onClick={() => { props.toggleSpeaker() }}>
                    <Icon size="large" color='black' name='sound' />
                    <Icon size="large" color='red' name='dont' />
                </Icon.Group>        
            }       
            content="enable."
        />
        )

        return (

            <Grid>
                <Grid.Row>
                    <Grid.Column >
                    {enableIcon}
                    <Dropdown
                        style={{paddingLeft:"10px"}}
                        pointing='top left'
                        options={outputAudioDevicesOpts}
                        trigger={trigger}
                        onChange={(e, { value }) => props.selectOutputAudioDevice(value as string)}
                    />
                        {/* <List style={{paddingLeft:"15px",paddingTop:"0px",paddingBottom:"0px"}} link>
                            <List.Item as='a' active onClick={() => { props.toggleSpeaker() }}><Icon name="ban" color={appState.currentSettings.speakerEnable ? "grey" : "red"}/>Disable Speaker</List.Item>
                        </List>  */}


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

        )
    }
}

export default SpeakerControl;