import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";

import { dispatch } from "../../../redux";
import { connectState } from "../../../redux/connector";

import {
	Language,
	LanguageEntry,
	Languages as Langs,
} from "../../../context/Locale";

import Emoji from "../../../components/common/Emoji";
import Checkbox from "../../../components/ui/Checkbox";
import Tip from "../../../components/ui/Tip";

type Props = {
	locale: Language;
};

type Key = [string, LanguageEntry];

function Entry({ entry: [x, lang], locale }: { entry: Key } & Props) {
	return (
		<Checkbox
			key={x}
			className={styles.entry}
			checked={locale === x}
			onChange={(v) => {
				if (v) {
					dispatch({
						type: "SET_LOCALE",
						locale: x as Language,
					});
				}
			}}>
			<div className={styles.flag}>
				<Emoji size={42} emoji={lang.emoji} />
			</div>
			<span className={styles.description}>{lang.display}</span>
		</Checkbox>
	);
}

export function Component(props: Props) {
	const languages = Object.keys(Langs).map((x) => [
		x,
		Langs[x as keyof typeof Langs],
	]) as Key[];

	return (
		<div className={styles.languages}>
			<h3>
				<Text id="app.settings.pages.language.select" />
			</h3>
			<div className={styles.list}>
				{languages
					.filter(([, lang]) => !lang.alt)
					.map(([x, lang]) => (
						<Entry key={x} entry={[x, lang]} {...props} />
					))}
			</div>
			<h3>
				<Text id="app.settings.pages.language.other" />
			</h3>
			<div className={styles.list}>
				{languages
					.filter(([, lang]) => lang.alt)
					.map(([x, lang]) => (
						<Entry key={x} entry={[x, lang]} {...props} />
					))}
			</div>
			<Tip>
				<span>
					<Text id="app.settings.tips.languages.a" />
				</span>{" "}
				<a
					href="https://weblate.insrt.uk/engage/revolt/?utm_source=widget"
					target="_blank">
					<Text id="app.settings.tips.languages.b" />
				</a>
			</Tip>
		</div>
	);
}

export const Languages = connectState(Component, (state) => {
	return {
		locale: state.locale,
	};
});