import { SplitModal } from "./splitModal";
import { languageNames } from "../translations";
import { CommonKeys, getKeySymbol } from "../keystrokes";
import { PlaceholderView } from "../Components/placeholderView";
import { OptionButtonList } from "../Components/optionButtonList";
import { NavigationButton } from "../Components/navigationButton";
import { InfoTile } from "../Components/infoTile";
import * as React from "../../react";
import SettingsViewModel, {
    SettingsModalPages,
} from "../../ViewModel/Global/settingsViewModel";
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
import { Languages, ThemeSettings } from "../../Model/Global/settingsModel";
import HomeViewModel from "../../ViewModel/Pages/homeViewModel";

export function LegalModal(
    coreViewModel: CoreViewModel,
    homeViewModel: HomeViewModel,
) {
    return (
        <div
            class="modal"
            toggle:open={homeViewModel.isPresentingLegalModal}
        >
            <div>
		<main>
		    <h1>{coreViewModel.translations.legal.legalHeadline}</h1>
		    <p class="secondary">{coreViewModel.translations.legal.legalDescription}</p>
		    <hr></hr>
		    <div class="flex-column gap">
			<div class="tile">
			    <span class="icon">privacy_tip</span>
			    <div>
				<b>{coreViewModel.translations.legal.privacyLabel}</b>
				<span class="secondary">{coreViewModel.translations.legal.privacyDescription}</span>
			    </div>
			</div>
			<div class="tile">
			    <span class="icon">cell_tower</span>
			    <div>
				<b>{coreViewModel.translations.legal.udnLabel}</b>
				<span class="secondary">{coreViewModel.translations.legal.udnDescription}</span>
			    </div>
			</div>
			<div class="tile">
			    <span class="icon">balance</span>
			    <div>
				<b>{coreViewModel.translations.legal.rightsLabel}</b>
				<span class="secondary">{coreViewModel.translations.legal.rightsDescription}</span>
			    </div>
			</div>
			<hr></hr>
			<button 
			    class="tile"
			    on:click={coreViewModel.openImprint}
			>
			    <span class="icon">contact_page</span>
			    <div>
				<b>{coreViewModel.translations.legal.imprintLabel}</b>
				<span class="secondary">{coreViewModel.translations.legal.imprintDescription}</span>
			    </div>
			    <span class="icon">open_in_new</span>
			</button>
			<button 
			    class="tile"
			    on:click={coreViewModel.openProviderContact}
			>
			    <span class="icon">domain</span>
			    <div>
				<b>{coreViewModel.translations.legal.infrastructureLabel}</b>
				<span class="secondary">{coreViewModel.translations.legal.infrastructureDescription}</span>
			    </div>
			    <span class="icon">open_in_new</span>
			</button>
		    </div>
		</main>
		<button
		    on:click={homeViewModel.closeLegalModal}
		    ctkeystroke={getKeySymbol(CommonKeys.CloseOrCancel)}
		>
		    {coreViewModel.translations.general.closeButton}
		    <span class="icon">close</span>
		</button>
	    </div>
	</div>
    );
}