import React, { useState } from 'react';
import {
  View,
  StyleSheet,
  Text,
  Dimensions,
  TouchableWithoutFeedback
} from 'react-native';
import { Icon, Slider } from 'react-native-elements';
import C from 'rn-class';

const { width } = Dimensions.get('window');

export const PLACEHOLDER_WIDTH = width / 4;

const setPlayer = () => {};

const PlayerControls = props => {
  const { title, closePlayer, slideup } = props;
  const [curPlayIdx, setCurPlayIdx] = useState(0);

  return (
    <TouchableWithoutFeedback onPress={slideup}>
      <View style={styles.container}>
        <View style={styles.placeholder} />
        <C.View cls="flx2">
          <Text numerOfLine={1}>{title}</Text>
          <Slider
            thumbTintColor="#333"
            value={curPlayIdx}
            onValueChange={value => setCurPlayIdx(value)}
          />
        </C.View>
        <C.View cls="flx1 jc-sa ai-sa flx-row">
          <C.EL.Icon type="entypo" name="controller-play" />
          <C.EL.Icon type="entypo" name="cross" onPress={closePlayer} />
        </C.View>
      </View>
    </TouchableWithoutFeedback>
  );
};

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center'
  },
  title: {
    flex: 2,
    flexWrap: 'wrap',
    paddingLeft: 8
  },
  placeholder: {
    width: PLACEHOLDER_WIDTH
  },
  icon: {
    fontSize: 24,
    color: 'gray',
    padding: 8
  }
});

export default PlayerControls;