import React from "react";
import Menu from "../components/ui/Menu";

import { useLocation, useNavigate } from "react-router-dom";
import { motion } from "framer-motion";
import { useUser } from "../hooks/useUser";
// import screensTranslations from "../data/screensTranslations.json";

import lhoistEmployee from "../assets/img/profiles/lhoist-employee.svg";
import subcontractorEmployee from "../assets/img/profiles/subcontractor-employee.svg";
import driver from "../assets/img/profiles/driver.svg";
import civilian from "../assets/img/profiles/civilian.svg";
import Loading from "../components/animations/Loading.jsx";

import AnimatedPage from "../components/AnimatedPage";
export default function Profile() {
	const navigate = useNavigate();
	const location = useLocation();

	const { profile, changeProfile } = useUser();

	const { language, screensTranslations } = useUser();

	if (!screensTranslations || !screensTranslations.profile) return <Loading />;
	const currentScreenTranslations = screensTranslations.profile;

	function handleChangeProfile(e) {
		changeProfile(e.target.getAttribute("value"));
	}

	return (
		<AnimatedPage className='page-container page-container--profile page-container-has-screen'>
			<div className='screen screen--profile'>
				<Menu />
				<section className='screen__content'>
					<h1 className='titling-construction'>{currentScreenTranslations.profile}</h1>
					<h2 className='screen-subtitle '>{currentScreenTranslations.iam}...</h2>

					<ul className='profile-select'>
						<li
							className='profile-select__profile-type'
							value='civilian'
							is-current={profile === "civilian" ? "true" : ""}
							onClick={handleChangeProfile}>
							<img src={civilian} alt='' />
							<h3 className='titling-construction'>
								{currentScreenTranslations.profiles.civilian}
							</h3>
						</li>
						<li
							className='profile-select__profile-type'
							value='driver'
							is-current={profile === "driver" ? "true" : ""}
							onClick={handleChangeProfile}>
							<img src={driver} alt='' />
							<h3 className='titling-construction'>
								{currentScreenTranslations.profiles.driver}
							</h3>
						</li>
						<li
							className='profile-select__profile-type'
							value='lhoist_employee'
							is-current={profile === "lhoist_employee" ? "true" : ""}
							onClick={handleChangeProfile}>
							<img src={lhoistEmployee} alt='' />
							<h3 className='titling-construction'>
								{currentScreenTranslations.profiles.lhoist_employee}
							</h3>
						</li>
						<li
							className='profile-select__profile-type'
							value='subcontractor_employee'
							is-current={profile === "subcontractor_employee" ? "true" : ""}
							onClick={handleChangeProfile}>
							<img src={subcontractorEmployee} alt='' />
							<h3 className='titling-construction'>
								{
									currentScreenTranslations.profiles
										.subcontractor_employee
								}
							</h3>
						</li>
					</ul>

					<button
						className='cta cta--construction cta--round cta--button-icon cta--next  '
						onClick={() => {
							navigate("/select-country");
						}}></button>
				</section>
			</div>
		</AnimatedPage>
	);
}