import React, {useCallback, useEffect, useMemo} from "react";
import "./Layout.sass";

interface TabsProps {
  tabNames: string[]
  index: number
  onChange: (newIndex: number) => void
  boldIndex?: number
}

export function Tabs({tabNames, index, onChange, boldIndex}: TabsProps) {
  useEffect(() => {
    if (index < 0) {
      onChange(0);
    } else if (tabNames.length > 0 && index >= tabNames.length) {
      onChange(tabNames.length - 1);
    }
  }, [tabNames, index, onChange]);

  const tabClass = useCallback((i: number) => {
    const classes = ['Tabs-element'];

    if (i === index) {
      classes.push("Tabs-active");
    }

    if (i === boldIndex) {
      classes.push("Tabs-bold");
    }

    return classes.join(" ");
  }, [index, boldIndex])

  return (
    <div className="Tabs-container">
      {tabNames.map((name, i) => (
        <div className={tabClass(i)}
             onClick={() => onChange(i)}
        >
          {name}
        </div>
      ))}
    </div>
  );
}