import {FC, useEffect} from "react";

import {AchievementCategory} from "../../../api";
import {Column} from "../../../common";
import {useAchievements} from "../../../hooks";
import {AchievementDetailsView} from "./AchievementDetailsView";
import {AchievementListView} from "./achievement-list";

interface AchievementCategoryViewProps {
  category: AchievementCategory;
}

export const AchievementCategoryView: FC<AchievementCategoryViewProps> = props => {
  const {category = null} = props;
  const {selectedAchievement = null, setSelectedAchievementId = null} = useAchievements();

  useEffect(() => {
    if (!category) return;

    if (!selectedAchievement) {
      setSelectedAchievementId(category?.achievements?.[0]?.achievementId);
    }
  }, [category, selectedAchievement, setSelectedAchievementId]);

  if (!category) return null;

  return (
    <Column fullHeight justifyContent="between">
      <AchievementListView achievements={category.achievements} />
      {!!selectedAchievement && <AchievementDetailsView achievement={selectedAchievement} />}
    </Column>
  );
};
