import { Paper, Tab, Tabs } from "@material-ui/core";
import React, { useEffect, useState } from "react";
import { getArtists } from "../api/artist";
import ArtistForm from "../components/ArtistForm";
import SongForm from "../components/SongForm";
import "../styles/Admin.css";

function Admin() {
  const [tab, setTab] = React.useState(0);
  const [artists, setArtists] = useState([]);

  useEffect(() => {
    const unsubscribe = getArtists((snapshot) => {
      setArtists(snapshot.docs.map((doc) => doc.data().name));
    });
    return unsubscribe;
  }, []);

  return (
    <div className="admin">
      <div className="admin__wrapper">
        <Paper square>
          <Tabs
            value={tab}
            onChange={(e, newValue) => setTab(newValue)}
            indicatorColor="secondary"
            textColor="secondary"
            centered
          >
            <Tab label="Add Song" />
            <Tab label="Add Artist" />
          </Tabs>
        </Paper>

        {tab === 0 ? (
          <SongForm artists={artists} />
        ) : tab === 1 ? (
          <ArtistForm artists={artists} />
        ) : (
          <div></div>
        )}
      </div>
    </div>
  );
}

export default Admin;