import { useState } from "react";
import { View, Text, StyleSheet } from "react-native";
import { Button, Slider } from "rn-inkpad";
import { LinearGradient } from "expo-linear-gradient";

export default function MediaPlayer() {
  const [isPlaying, setIsPlaying] = useState(false);
  const [progress, setProgress] = useState(35);

  return (
    <LinearGradient
      colors={[
        "rgba(25,25,25,0.95)",
        "rgba(15,15,15,0.98)",
        "rgba(5,5,5,1)",
        "rgba(5,5,5,1)",
      ]}
      locations={[0, 0.55, 0.85, 1]}
      start={{ x: 0.5, y: 0 }}
      end={{ x: 0.5, y: 1 }}
      style={styles.box}
    >
      <Text style={styles.name_album_and_artist}>
        PlaceholderArtist - PlaceholderTrack
      </Text>

      <View style={styles.playback_row}>
        <Text style={styles.time}>1:20</Text>
        <View style={styles.slider_wrapper}>
          <Slider
            value={progress}
            min={0}
            max={100}
            onChange={setProgress}
            onValueChange={setProgress}
            trackStyles={{
              height: 5,
              borderRadius: 5,
              trackCompletedColor: "#DDDDDD",
            }}
            thumbStyles={{
              height: 15,
              width: 15,
            }}
          />
        </View>
        <Text style={styles.time}>4:08</Text>
      </View>

      <Button
        buttonColor="rgba(0,0,0,0)"
        text=""
        icon={isPlaying ? "play" : "pause"}
        iconSize={45}
        onPress={() => setIsPlaying(!isPlaying)}
      />
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  box: {
    borderRadius: 15,
    paddingHorizontal: 16,
    paddingTop: 12,
    paddingBottom: 10,
    alignSelf: "stretch",
    marginHorizontal: 5,
    minHeight: 120,
    justifyContent: "space-between",
    alignItems: "center",
  },
  name_album_and_artist: {
    color: "#ffffff",
    fontSize: 18,
    fontWeight: "bold",
  },
  playback_row: {
    flexDirection: "row",
    width: "100%",
    alignItems: "center",
    marginTop: 10,
  },
  slider_wrapper: {
    flex: 1,
    marginHorizontal: 10,
  },
  time: {
    color: "#ffffff",
    fontWeight: "bold",
  },
});