import React from 'react'
import './volume.css'
import { useStateProvider } from '../../../util/StateProvider'
import { MdOpenInFull } from "react-icons/md";
import { IoVolumeLow } from "react-icons/io5";
import { MdImportantDevices } from "react-icons/md";
import { HiOutlineQueueList } from "react-icons/hi2";
import { TbMicrophone2 } from "react-icons/tb";
import { AiOutlinePlaySquare } from "react-icons/ai";
import axios from 'axios';

const Volume = () => {
    const [{token}] = useStateProvider();
    const setVolume = async (e) => {
        await axios.put('https://api.spotify.com/v1/me/player/volume',{}, 
        //PREMIUM_REQUIRED
        {
            params:{
                volume_percent: parseInt(e.target.value)
            },
            headers:{
                Authorization:"Bearer "+token,
                "Content-Type": "application/json"
            }
        });
    };
  return (
    <div className='Volume'>
        <AiOutlinePlaySquare/>
        <TbMicrophone2/>
        <HiOutlineQueueList/>
        <MdImportantDevices/>
        <div className="volume-icon">
            <IoVolumeLow/>
            <input type="range" min={0} max={100} onMouseUp= {(e) => setVolume(e)}/>
        </div>
        <MdOpenInFull/>
    </div>
  )
}

export default Volume