import React from "react";

import { FloatingMenu, Flag, LanguageMenu } from "@ax/components";

import * as S from "./style";
import { ILanguage } from "@ax/types";

const LangMenu = (props: IProps) => {
	const { currentLanguages, locale, languages, handleLanguage } = props;

	return (
		<LanguageMenu
			language={locale}
			availableLanguages={languages}
			setLanguage={handleLanguage}
			currentLanguages={currentLanguages}
		/>
	);
};

const FlagsButton = (currentLanguages: ILanguage[]) => {
	return (
		<S.FlagsWrapper>
			{currentLanguages.map((pageLanguage, i: number) => (
				<Flag key={`${pageLanguage.language}${i}`} name={pageLanguage.locale} size="15" />
			))}
			<span>({currentLanguages.length})</span>
		</S.FlagsWrapper>
	);
};

const Translations = (props: IProps) => {
	const { currentLanguages, locale, languages, handleLanguage } = props;

	return (
		<FloatingMenu Button={() => FlagsButton(currentLanguages)}>
			<LangMenu
				currentLanguages={currentLanguages}
				locale={locale}
				languages={languages}
				handleLanguage={handleLanguage}
			/>
		</FloatingMenu>
	);
};

interface IProps {
	currentLanguages: ILanguage[];
	locale: string;
	languages: ILanguage[];
	handleLanguage(language: ILanguage): void;
}

export { Translations };
