import { Tab } from "@headlessui/react";
import "./index.scss";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import SwitchCase from "@/renderer/components/SwitchCase";
import MusicResult from "./widgets/MusicResult";
import AlbumResult from "./widgets/AlbumResult";

interface IBodyProps {
  artistItem: IArtist.IArtistItem;
}

const supportedMediaType = ["music", "album"];
export default function Body(props: IBodyProps) {
    const {artistItem} = props;
  const [currentMediaType, setCurrentMediaType] = useState("music");
  const { t } = useTranslation();
  


  return (
    <div className="artist-view--body-container">
      <Tab.Group
        onChange={(index) => {
          setCurrentMediaType(supportedMediaType[index]);
        }}
      >
        <Tab.List className="tab-list-container">
          {supportedMediaType.map((type) => (
            <Tab key={type} as="div" className="tab-list-item">
              {t(type)}
            </Tab>
          ))}
        </Tab.List>
        <Tab.Panels className={"tab-panels-container"}>
          {supportedMediaType.map((type) => (
            <Tab.Panel className="tab-panel-container" key={type}>
                <SwitchCase.Switch switch={type}>
                    <SwitchCase.Case case={'music'}>
                        <MusicResult artistItem={artistItem}></MusicResult>
                    </SwitchCase.Case>
                    <SwitchCase.Case case={'album'}>
                        <AlbumResult artistItem={artistItem}></AlbumResult>
                    </SwitchCase.Case>
                </SwitchCase.Switch>
            </Tab.Panel>
          ))}
        </Tab.Panels>
      </Tab.Group>
    </div>
  );
}
