import "../sidebar/toolbar.css";
import { languageSlice } from "../../store/reducers/languageSlice";
import { useAppDispatch, useAppSelector } from "../../hooks/redux";

export const LanguagePopup: React.FC<any> = ({ setOpen }) => {
  const { handleChangeLanguage } = languageSlice.actions;

  const buttons = [{ value: "ru" }, { value: "en" }];
  const dispatch = useAppDispatch();

  const onChange = (value: string) => {
    dispatch(handleChangeLanguage(value));
    setOpen(false);
  };

  const { currentLang } = useAppSelector((state) => state.languageReducer);

  return (
    <div className="toolbar-language-popup">
      {buttons.map((i) => (
        <div className="toolbar-button-area">
          <button
            key={i.value}
            value={i.value}
            onClick={(e: any) => onChange(e.target.value)}
            className={
              currentLang === i.value
                ? "toolbar-button toolbar-button-active"
                : "toolbar-button"
            }
          >
            {i.value.toUpperCase()}
          </button>
        </div>
      ))}
    </div>
  );
};