import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import {
    togglePlay,
    toggleRepeat,
    setVolume,
    setCurrentTime,
} from "../../redux/actions/creators/audio";
import {
    ButtonCollapse,
    ButtonVolume,
    Audio,
    Duration,
    Footer,
    Header,
    MainButtons,
    Info,
    PlaylistName,
    TrackName,
    Volume,
    VolumeSettings,
    Wrapper,
    StatusButton,
    NextButton,
    RepeatButton,
    PreviousButton,
    ShuffleButton,
} from "./style";

import CollapseIcon from "../../assets/collapse_icon.svg";
import ShuffleIcon from "../../assets/shuffle_icon.svg";
import PreviousIcon from "../../assets/previous_icon.svg";
import NextIcon from "../../assets/next_icon.svg";
import PlayIcon from "../../assets/play_icon.svg";
import StopIcon from "../../assets/stop_icon.svg";
import RepeatIcon from "../../assets/repeat_icon.svg";
import VolumeUpIcon from "../../assets/volume_up_icon.svg";
import VolumeStopIcon from "../../assets/volume_stop_icon.svg";

const Player = () => {
    const dispatch = useDispatch();
    const state = useSelector((state) => state.audio);

    const [isCollapsed, setIsCollapsed] = useState(false);

    return (
        <Wrapper isCollapsed={isCollapsed}>
            <Header>
                <Duration>0:00:00</Duration>
                <Audio
                    type={"range"}
                    min={0}
                    max={state.duration}
                    value={state.currentTime}
                    onChange={(e) => {
                        dispatch(setCurrentTime(+e.target.value));
                    }}
                />
                <ButtonCollapse
                    src={CollapseIcon}
                    isCollapsed={isCollapsed}
                    onClick={() => setIsCollapsed(!isCollapsed)} // change to redux
                />
            </Header>
            {!isCollapsed ? (
                <Footer>
                    <Info>
                        <PlaylistName>Here is playlist</PlaylistName>
                        <TrackName>Here is track</TrackName>
                    </Info>
                    <MainButtons>
                        <ShuffleButton src={ShuffleIcon} />
                        <PreviousButton src={PreviousIcon} />
                        <StatusButton
                            src={state.isPlaying ? StopIcon : PlayIcon}
                            isPlaying={state.isPlaying}
                            onClick={() =>
                                dispatch(
                                    togglePlay(state.isPlaying ? false : true)
                                )
                            }
                        />
                        <NextButton src={NextIcon} />
                        <RepeatButton
                            src={RepeatIcon}
                            isRepeated={state.isRepeated}
                            onClick={() =>
                                dispatch(toggleRepeat(!state.isRepeated))
                            }
                        />
                    </MainButtons>
                    <VolumeSettings>
                        <ButtonVolume
                            src={state.volume ? VolumeUpIcon : VolumeStopIcon} // redux
                            onClick={() =>
                                dispatch(setVolume(state.volume ? 0 : 1))
                            }
                        />
                        <Volume
                            type={"range"}
                            min={0}
                            max={1}
                            step={0.01}
                            value={state.volume}
                            onChange={(e) => {
                                dispatch(setVolume(+e.target.value));
                            }}
                        ></Volume>
                    </VolumeSettings>
                </Footer>
            ) : null}
        </Wrapper>
    );
};

export default Player;
