import React, { useState, useContext } from 'react';
import {
  View,
  StyleSheet
} from 'react-native';
import { Icon, Slider } from 'react-native-elements';
import C from 'rn-class';
import {PlayerStateContext, PlayerDispatchContext} from './PlayerReducer';

export default PlayerHead = props => {
  const { closePlayer, visibleMenu} = props;
  const [isMute, setIsMute] = useState(false);
  const playerDispatch = useContext(PlayerDispatchContext);
  const playerState = useContext(PlayerStateContext);
  const {paused, muted, player, duration, currentTime} = playerState;

  const setMute = () => {
    //setIsMute(!isMute);
    playerDispatch({type:'muted'});
  }
  const iconsize = {...C.n2cls('size7')};

  return (
    <View style={styles.container}>
      <C.View cls="flx-row flx0.3 ai-s jc-sa">
        <C.EL.Icon {...iconsize} type="ionicon" name="md-book" onPress={()=>{visibleMenu('detail')}} />
        <C.EL.Icon {...iconsize} type="ionicon" name="md-share" onPress={()=>{visibleMenu('share')}} />
        <C.EL.Icon {...iconsize} color="rgb(255,45,85)" type="ionicon" name="md-heart" />
      </C.View>
      <C.View cls="flx-row flx0.3 ai-e jc-sa">
        { muted
          ?<C.EL.Icon {...iconsize} type="ionicon" name="md-volume-off" onPress={setMute} />
          :<C.EL.Icon {...iconsize} type="ionicon" name="md-volume-high" onPress={setMute} />
        }
        <C.EL.Icon {...iconsize} type="ionicon" name="md-arrow-down" />
        <C.EL.Icon {...iconsize} type="ionicon" name="md-close" onPress={closePlayer} />
      </C.View>
    </View>
  );
}

const styles = StyleSheet.create({
    container: {
      ...StyleSheet.absoluteFillObject,
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      zIndex: 20
    },
  });