import React from 'react';
import { RequestCluster } from '../request-cluster';
import { StolenDataEntry } from '../stolen-data-entry';
import { getDate } from '../util';
import EmailTemplate3Controls from './email-template-3-controls';
import './email-template-3.scss';

declare var PLUGIN_NAME: string;
declare var PLUGIN_URL: string;

export type EmailTemplate3Config = {
    pronoun: 0 | 1 | 2 | 3; // masc, fem, neutral, plural
    policy_readable: 'null' | 'yes' | 'entirely_obscured_by_popup' | 'cant_find';
    hosts_settings: Record<
        string,
        {
            presence: 'null' | 'not_mentioned' | 'mentioned_in_popup' | 'mentioned_in_policy';
            legal_basis_type: 'null' | 'consent' | 'legitimate_interest' | 'not_mentioned';
            consent_problems?:
                | 'claims_consent_but_sends_before_consent'
                | 'claims_consent_but_there_was_no_easy_refuse'
                | 'none'
                | 'null';

            legitimate_interest_activity_specified: 'null' | 'no' | 'precise' | 'vague';
            legitimate_interest_activity_description: string;
        }
    >;
    popup_type: 'none' | 'passive_cookie_banner' | 'consent';
    popup_action: 'ignored' | 'accepted' | 'closed';
    popup_closed_how: string;
    popup_screenshot_base64: string | null;
    popup_accept_all_text: string;
    popup_mentions_passive_consent: boolean;
    popup_passive_consent_text: string;
};

export default function EmailTemplate3({
    entries,
    clusters,
}: {
    entries: StolenDataEntry[];
    clusters: Record<string, RequestCluster>;
    version: number;
}): JSX.Element {
    const all_host_ids = Array.from(new Set(entries.map((entry) => entry.request.shorthost)));

    const [config, setConfig] = React.useState<EmailTemplate3Config>({
        pronoun: Math.round(Math.random()) as 0 | 1,
        policy_readable: 'null',
        hosts_settings: Object.fromEntries(
            all_host_ids.map((cluster_id) => [
                cluster_id,
                {
                    presence: 'null',
                    legal_basis_presence: 'null',
                    legal_basis_type: 'null',
                    consent_problems: 'null',
                    legitimate_interest_activity_specified: 'null',
                    legitimate_interest_activity_description: '',
                },
            ])
        ),
        popup_type: 'none',
        popup_action: 'ignored',
        popup_screenshot_base64: null,
        popup_accept_all_text: 'Zaakceptuj wszystkie',
        popup_mentions_passive_consent: false,
        popup_passive_consent_text: '',
        popup_closed_how: 'kliknięcie  przycisku „X”',
    });

    const visited_url = entries[0].request.originalURL;

    const p = config.pronoun;

    return (
        <div className="mail-wrapper">
            <div className="mail-controls">
                <EmailTemplate3Controls {...{ config, setConfig, hosts: all_host_ids }} />
            </div>
            <div className="mail-content-wrapper">
                <article className="mail-content">
                    <p>
                        Dzień dobry, w dniu {getDate()}{' '}
                        {['odwiedziłem', 'odwiedziłam', 'odwiedziłom', 'odwiedziliśmy'][p]} stronę{' '}
                        {visited_url} i {['zbadałem', 'zbadałam', 'zbadałom', 'zbadaliśmy'][p]} ją
                        za pomocą wtyczki <a href={PLUGIN_URL}>{PLUGIN_NAME}</a> w celu zbadania,
                        jakie informacje o {['mnie', 'mnie', 'mnie', 'nas'][p]} wysyła ta strona do
                        podmiotów trzecich.
                    </p>
                    <p>
                        {['Moją', 'Moją', 'Moją', 'Naszą'][p]} szczególną uwagę przykuło:
                        WYFILTROWANE WZGLĘDEM TEGO, CZY DANEGO PODMIOTU NIE MA W POLITYCE
                        PRYWATNOŚCI LUB POWIADOMIENIU O COOKIESACH{' '}
                        <ul>
                            <li>
                                - wysyłanie mojego identyfikatora internetowego [z Cookie] (value)
                                oraz części mojej historii przeglądania do właściciela domeny
                                (domain);
                            </li>
                            <li> - (...).</li>
                        </ul>
                    </p>
                    <p>
                        Dane te zostały wysłane zanim{' '}
                        {['miałem', 'miałam', 'miałom', 'mieliśmy'][p]} szansę przeczytać Państwa
                        politykę prywatności i w jakikolwiek czynny i jednoznaczny sposób wyrazić
                        zgodę na takie przetwarzanie moich danych osobowych.
                    </p>
                    {!['yes', 'null'].includes(config.policy_readable) ? (
                        <p>
                            {['Chciałem', 'Chciałam', 'Chciałom', 'Chcieliśmy'][p]} przeczytać
                            Państwa politykę prywatności przed akceptacją, ale{' '}
                            {config.policy_readable == 'cant_find' ? (
                                <>nie mogę znaleźć jej nigdzie na Państwa stronie.</>
                            ) : (
                                ''
                            )}{' '}
                            {config.policy_readable == 'entirely_obscured_by_popup' ? (
                                <>jest ona przesłonięta przez okienko o RODO.</>
                            ) : (
                                ''
                            )}
                        </p>
                    ) : (
                        ''
                    )}
                    <p>
                        Dane zostały udostępnione podmiotom, o których nie{' '}
                        {['znalazłem', 'znalazłam', 'znalazłom', 'znaleźliśmy'][p]} informacji ani w
                        Państwa polityce prywatności, ani w żadnym wyskakującym okienku na Państwa
                        stronie. Z tego powodu zwracam{p == 3 ? 'y' : ''} się do Państwa z pytaniem:
                        jakie były podstawy prawne takiego ujawnienia{' '}
                        {['moich', 'moich', 'moich', 'naszych'][p]} danych osobowych wyżej
                        wymienionym podmiotom? Uprzejmie{' '}
                        {['proszę', 'proszę', 'proszę', 'prosimy'][p]} o wskazanie podstawy prawnej
                        dla każdego z tych podmiotów z osobna.
                    </p>
                </article>
            </div>
        </div>
    );
}