import { Box, Link, Stack, Typography } from "@mui/material";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";

import { LanguageSwitcher } from "@/shared";

import { useAudioInstructionsStore } from "./store/audio-instructions.store";

export const AudioInstructions = () => {
	const { readAudioInstructions } = useAudioInstructionsStore();
	const { t } = useTranslation();

	useEffect(() => {
		return () => {
			readAudioInstructions();
		};
	}, []);

	return (
		<Stack spacing={4}>
			<Stack direction="row" alignItems="center" spacing={1}>
				<Typography>
					{t(
						"For correct operation, sound reproduction for this site is required"
					)}
				</Typography>

				<LanguageSwitcher />
			</Stack>
			<Box>
				<Typography>
					{t(
						"Google has updated its policy on sound. To enable sound,"
					)}
					<Link
						className="ms-1"
						target="_blank"
						href="https://developers.google.com/web/updates/2017/09/autoplay-policy-changes"
					>
						{t("read more")}
					</Link>
				</Typography>

				<ol>
					<li>
						{t(
							'Click on the lock. If you are using an unsecured connection, click on the "Not secured" label.'
						)}
					</li>
					<li>
						{t(
							'Click on the dropdown list next to the "Sound" label.'
						)}
					</li>
					<li>{t('Select "Allow".')}</li>
					<li>
						{t(
							'If the "Sound" option is not available, click on an empty space in this window and return to point 1.'
						)}
					</li>
				</ol>
			</Box>
		</Stack>
	);
};
