import React, { useState } from "react";
import { Link } from "react-router-dom";
import { Wrapper, Navbar, Line, BtnBack, Logo, Image, Text } from "./style";
import { Tab } from "../../components";
import { ROUTES } from "../../utils/constants";

import logo from "../../assets/logo.png";
import IconBack from "@mui/icons-material/KeyboardBackspace";
import HomeIcon from "../../assets/home_icon.svg";
import ProfileIcon from "../../assets/profile_icon.svg";
import QueueIcon from "../../assets/queue_icon.svg";
import TrackIcon from "../../assets/track_icon.svg";
import PlaylistIcon from "../../assets/playlist_icon.svg";
import { back, push } from "../../utils/history";

const tabs = [
    {
        label: "Home",
        route: ROUTES.HOME,
        icon: HomeIcon,
    },
    {
        label: "Profile",
        route: ROUTES.PROFILE,
        icon: ProfileIcon,
    },
    {
        label: "Play queue",
        route: ROUTES.QUEUE,
        icon: QueueIcon,
    },
    {
        label: "Tracks",
        route: ROUTES.TRACKS,
        icon: TrackIcon,
    },
    {
        label: "Playlists",
        route: ROUTES.PLAYLISTS,
        icon: PlaylistIcon,
    },
];

const LeftBar = () => {
    return (
        <Wrapper>
            <Navbar>
                <BtnBack onClick={() => back()}>
                    <IconBack/>
                </BtnBack>
                <Link to="/" onClick={() => push(ROUTES.HOME)}>
                    <Logo>
                        <Image src={logo} alt="logo" />
                        <Text>Audio Player</Text>
                    </Logo>
                </Link>
            </Navbar>

            {tabs.map((tab, index) => (
                <React.Fragment key={index}>
                    <Link to={tab.route} onClick={() => push(tab.route)}>
                        <Tab
                            label={tab.label}
                            icon={tab.icon}
                            url={tab.route}
                        />
                    </Link>
                    {index === 2 ? <Line /> : null}
                </React.Fragment>
            ))}
        </Wrapper>
    );
};
export default LeftBar;
