import SubtitleLanguage from "@material-symbols/svg-400/rounded/closed_caption.svg";
import PlayModeI from "@material-symbols/svg-400/rounded/display_settings.svg";
import MovieInfo from "@material-symbols/svg-400/rounded/movie_info.svg";
import AudioLanguage from "@material-symbols/svg-400/rounded/music_note.svg";
import PlayArrow from "@material-symbols/svg-400/rounded/play_arrow.svg";
import Replay from "@material-symbols/svg-400/rounded/replay.svg";
import PlayerI from "@material-symbols/svg-400/rounded/smart_display.svg";
import Theaters from "@material-symbols/svg-400/rounded/theaters.svg";
import langmap from "langmap";
import { useTranslation } from "react-i18next";
import { Platform } from "react-native";
import { Select } from "~/primitives";
import { useLocalSetting } from "~/providers/settings";
import { useLanguageName } from "~/track-utils";
import { Preference, SettingsContainer, useSetting } from "./base";

const seenNativeNames = new Set();
export const languageCodes = Object.keys(langmap)
	.filter((x) => {
		const nativeName = langmap[x]?.nativeName;

		// Only include if nativeName is unique and defined
		if (nativeName && !seenNativeNames.has(nativeName)) {
			seenNativeNames.add(nativeName);
			return true;
		}
		return false;
	})
	.filter((x) => !x.includes("@"));

export const PlaybackSettings = () => {
	const { t } = useTranslation();
	const [playMode, setDefaultPlayMode] = useLocalSetting("playMode", "direct");
	const [player, setPlayer] = useLocalSetting<"vlc" | "exoplayer">(
		"player",
		"vlc",
	);
	const [audio, setAudio] = useSetting("audioLanguage")!;
	const [subtitle, setSubtitle] = useSetting("subtitleLanguage")!;
	const getLanguageName = useLanguageName();

	return (
		<SettingsContainer title={t("settings.playback.label")}>
			<Preference
				icon={PlayModeI}
				label={t("settings.playback.playmode.label")}
				description={t("settings.playback.playmode.description")}
			>
				<Select
					label={t("settings.playback.playmode.label")}
					value={playMode}
					onValueChange={(value) => setDefaultPlayMode(value)}
					values={["direct", "hls"]}
					getLabel={(key) => t(key === "hls" ? "player.auto" : "player.direct")}
				/>
			</Preference>
			{Platform.OS === "android" && (
				<Preference
					icon={PlayerI}
					label={t("settings.playback.player.label")}
					description={t("settings.playback.player.description")}
				>
					<Select
						label={t("settings.playback.player.label")}
						value={player}
						onValueChange={(value) => setPlayer(value)}
						values={["vlc", "exoplayer"]}
						getLabel={(key) => t(`settings.playback.player.${key}`)}
					/>
				</Preference>
			)}
			<Preference
				icon={AudioLanguage}
				label={t("settings.playback.audioLanguage.label")}
				description={t("settings.playback.audioLanguage.description")}
			>
				<Select
					label={t("settings.playback.audioLanguage.label")}
					value={audio}
					onValueChange={(value) => setAudio(value)}
					values={["default", "original", ...languageCodes]}
					getLabel={(key) =>
						key === "default"
							? t("mediainfo.default")
							: key === "original"
								? t("settings.playback.audioLanguage.original")
								: (getLanguageName(key) ?? key)
					}
				/>
			</Preference>
			<Preference
				icon={SubtitleLanguage}
				label={t("settings.playback.subtitleLanguage.label")}
				description={t("settings.playback.subtitleLanguage.description")}
			>
				<Select
					label={t("settings.playback.subtitleLanguage.label")}
					value={subtitle ?? "none"}
					onValueChange={(value) =>
						setSubtitle(value === "none" ? null : value)
					}
					values={["none", "default", ...languageCodes]}
					getLabel={(key) =>
						key === "none"
							? t("settings.playback.subtitleLanguage.none")
							: key === "default"
								? t("mediainfo.default")
								: (getLanguageName(key) ?? key)
					}
				/>
			</Preference>
		</SettingsContainer>
	);
};

const defaultChapterSkipBehaviors = [
	"autoSkip",
	"showSkipButton",
	"disabled",
] as const;

const introCreditsChapterSkipBehaviors = [
	"autoSkip",
	"autoSkipExceptFirstAppearance",
	"showSkipButton",
	"disabled",
] as const;

const chapterTypes = [
	{ type: "recap", icon: Replay },
	{ type: "intro", icon: PlayArrow },
	{ type: "credits", icon: Theaters },
	{ type: "preview", icon: MovieInfo },
] as const;

export const ChapterSkipSettings = () => {
	const { t } = useTranslation();
	const [chapterSkip, setChapterSkip] = useSetting("chapterSkip")!;

	return (
		<SettingsContainer title={t("settings.playback.chapterSkip.label")}>
			{chapterTypes.map(({ type, icon }) => {
				const values =
					type === "intro" || type === "credits"
						? introCreditsChapterSkipBehaviors
						: defaultChapterSkipBehaviors;

				return (
					<Preference
						key={type}
						icon={icon}
						label={t(`settings.playback.chapterSkip.types.${type}`)}
						description={t(
							`settings.playback.chapterSkip.descriptions.${type}`,
						)}
					>
						<Select
							label={t(`settings.playback.chapterSkip.types.${type}`)}
							value={chapterSkip[type]}
							onValueChange={(value) =>
								setChapterSkip({ ...chapterSkip, [type]: value })
							}
							values={[...values]}
							getLabel={(key) =>
								t(`settings.playback.chapterSkip.behaviors.${key}`)
							}
						/>
					</Preference>
				);
			})}
		</SettingsContainer>
	);
};
