Elep

import Icon from "../../utils/Icon";
import { __ } from '@wordpress/i18n';
import Panel from "../Panel";
import UseSyncData from "./SyncData";
import useFields from "../../Settings/Fields/FieldsData";
import {memo,useEffect, useState} from "@wordpress/element";
import CheckboxGroup from "../Inputs/CheckboxGroup";
import SelectInput from "../Inputs/SelectInput";

const CookieDetails = (cookie) => {
	const {getFieldValue, showSavedSettingsNotice} = useFields();
	const {language, saving, purposesOptions, services, updateCookie, toggleDeleteCookie, saveCookie} = UseSyncData();
	const [name, setName] = useState('');
	const [retention, setRetention] = useState('');
	const [cookieFunction, setCookieFunction] = useState('');
	const [purposesByLanguage, setPurposesByLanguage] = useState([]);

//allow for both '0'/'1' and false/true.
	let useCdbApi = getFieldValue('use_cdb_api')!=='no';
	let sync = useCdbApi ? cookie.sync==1 : false;
	let disabled = sync;
	if (saving) {
		disabled = true;
	}
	let cdbLink = false;
	if ( cookie.slug.length>0 ) {
		let service_slug = !cookie.service ? 'unknown-service' : cookie.service;
		cdbLink = 'https://cookiedatabase.org/cookie/' + service_slug + '/' + cookie.slug;
	}

useEffect(() => {
		if ( cookie && cookie.cookieFunction ) {
			setCookieFunction(cookie.cookieFunction);
		}
	},[cookie]);

const onSaveHandler = async (id) => {
		await saveCookie(id);
		showSavedSettingsNotice(__("Saved cookie", "complianz-gdpr"));
	}

const onDeleteHandler = async (id) => {
		await toggleDeleteCookie(id);
	}

const onChangeHandler = (value, id, type) => {
		updateCookie(id, type, value);
	}

useEffect(() => {
		if ( cookie && cookie.name ) {
			setName(cookie.name);
		}
	},[cookie.name]);

useEffect(() => {
		if (!cookie){
			return;
		}
		if (cookie.name=== name) {
			return;
		}
		const typingTimer = setTimeout(() => {
			updateCookie(cookie.ID, 'name', name);
		}, 500);

return () => {
			clearTimeout(typingTimer);
		};
	}, [name]);

useEffect(() => {
		if ( !cookie ) {
			return;
		}
		if ( cookie.cookieFunction === cookieFunction ){
			return;
		}
		const typingTimer = setTimeout(() => {
			updateCookie(cookie.ID, 'cookieFunction', cookieFunction);
		}, 500);

return () => {
			clearTimeout(typingTimer);
		};
	}, [cookieFunction]);

useEffect(() => {
		if ( cookie && cookie.retention ) {
			setRetention(cookie.retention);
		}
	},[cookie.retention]);

useEffect(() => {
		if ( !cookie ) {
			return;
		}
		if ( cookie.retention === retention ) {
			return;
		}
		const typingTimer = setTimeout(() => {
			updateCookie(cookie.ID, 'retention', retention);
		}, 500);

return () => {
			clearTimeout(typingTimer);
		};
	}, [retention]);

useEffect (() => {
		let purposes = purposesOptions && purposesOptions.hasOwnProperty(language) ? purposesOptions[language] : [];
		purposes = purposes.map(purpose => {
			return {label:purpose.label,value:purpose.label};
		});
		setPurposesByLanguage(purposes);
	},[language, purposesOptions]);

//convert legacy marketing/tracking label to marketing, if found.
	let purposesHasSlash = false;
	let purposeMarketing = 'Marketing';
	purposesByLanguage.forEach(function(purpose, i) {
		if (purpose.value && purpose.value.indexOf('/')!==-1){
			purposesHasSlash = true;
			purposeMarketing = purpose.value;
			//strip off string after slash, including the slash
			purposeMarketing = purposeMarketing.substring(0, purposeMarketing.indexOf('/'));
		}
	});
	let cookieHasSlash =  cookie.purpose && cookie.purpose.indexOf('/')!==-1;
	if ( cookieHasSlash ){
		purposeMarketing = cookie.purpose.substring(0, cookie.purpose.indexOf('/'));
	}

if ( purposesHasSlash && !cookieHasSlash ) {
		//find the first purpose with a slash in purposeOptions, and change it to purposeMarketing
		purposesByLanguage.forEach(function(purpose, i) {
			if (purpose.value && purpose.value.indexOf('/')!==-1){
				purpose.value = purposeMarketing;
				purpose.label = purposeMarketing;
				purposesByLanguage[i] = purpose;
			}
		});
	}

let cookiePurpose = cookie.purpose;
	if ( !purposesHasSlash && cookieHasSlash ) {
		cookiePurpose = purposeMarketing;
	}

return (
		<>
			<div className="cmplz-details-row cmplz-details-row__checkbox">
				<CheckboxGroup
					id={cookie.ID+'_cdb_api'}
					disabled={!useCdbApi}
					value={sync}
					onChange={(value) => onCheckboxChangeHandler(value, cookie.ID, 'sync')}
					options={{true: __('Sync cookie with cookiedatabase.org', 'complianz-gdpr')}}
				/>
			</div>
			<div className="cmplz-details-row cmplz-details-row__checkbox">
				<CheckboxGroup
					id={cookie.ID+'showOnPolicy'}
					disabled={disabled}
					value={cookie.showOnPolicy}
					onChange={(value) => onCheckboxChangeHandler(value, cookie.ID, 'showOnPolicy')}
					options={{true: __('Show cookie on Cookie Policy', 'complianz-gdpr')}}
				/>
			</div>
			<div className="cmplz-details-row">
				<label>{__("Name", "complianz-gdpr")}</label>
				<input disabled={disabled}
					   onChange={ ( e ) =>  setName(e.target.value) }
					   type="text" placeholder={__("Name", "complianz-gdpr")}
					   value={name} />
			</div>
			<div className="cmplz-details-row">
				<label>{__("Service", "complianz-gdpr")}</label>
				<SelectInput
					disabled={disabled}
					value={cookie.serviceID}
					options={servicesOptions}
					onChange={(value) => onChangeHandler(value, cookie.ID, 'serviceID')}
				/>
			</div>
			<div className="cmplz-details-row">
				<label>{__("Expiration", "complianz-gdpr")}</label>
				<input disabled={retentionDisabled}
					   onChange={ ( e ) =>  setRetention(e.target.value) }
					   type="text" placeholder={__("1 year", "complianz-gdpr")}
					   value={retention} />
			</div>
			<div className="cmplz-details-row">
				<label>{__("Cookie function", "complianz-gdpr")}</label>
				<input disabled={disabled}
					   onChange={ ( e ) =>  setCookieFunction(e.target.value) }
					   type="text" placeholder={__("e.g. store user ID", "complianz-gdpr")}
					   value={cookieFunction} />
			</div>
			<div className="cmplz-details-row">
				<label>{__("Purpose", "complianz-gdpr")}</label>
				<SelectInput
					disabled={disabled}
					value={cookiePurpose}
					options={purposesByLanguage}
					onChange={(value) => onChangeHandler(value, cookie.ID, 'purpose')}
				/>
			</div>
			{cdbLink &&
				<div className="cmplz-details-row">
					<a href={cdbLink} target="_blank" rel="noopener noreferrer">{__( "View cookie on cookiedatabase.org", "complianz-gdpr" )}</a>
				</div>
			}
			<div className="cmplz-details-row cmplz-details-row__buttons">
				<button disabled={saving} onClick={ ( e ) => onSaveHandler(cookie.ID) } className="button button-default">{__("Save", "complianz-gdpr")}</button>
				<button className={"button button-default "+ deletedClass } onClick={ ( e ) => onDeleteHandler(cookie.ID) }>
					{cookie.deleted==1 && __("Restore", "complianz-gdpr")}
					{cookie.deleted!=1 && __("Delete", "complianz-gdpr")}
				</button>
			</div>
		</>
	);
}
/**
 * Render a help notice in the sidebar
 */
const Cookie = ({cookie, id}) => {
	const Icons = () => {
		return (
			<>
				{cookie.complete && <Icon tooltip={__( "The data for this cookie is complete", "complianz-gdpr" )} name = 'success' color = 'green' />}
				{!cookie.complete && <Icon tooltip={__( "This cookie has missing fields", "complianz-gdpr" )} name = 'times' color = 'red' />}
				{cookie.sync && cookie.synced && <Icon name='rotate' color = 'green'/>}
				{!cookie.synced || !cookie.sync && <Icon tooltip={__( "This cookie is not synchronized with cookiedatabase.org.",'complianz-gdpr')} name = 'rotate-error' color = 'red'/>}

{cookie.showOnPolicy && <Icon tooltip={__( "This cookie will be on your Cookie Policy", "complianz-gdpr" )} name = 'file' color = 'green'/>}
				{!cookie.showOnPolicy && <Icon tooltip={__( "This cookie is not shown on the Cookie Policy", "complianz-gdpr" )}  name = 'file-disabled' color = 'grey'/>}

{cookie.old && <Icon tooltip={__( "This cookie has not been detected on your site in the last three months", "complianz-gdpr" )} name = 'calendar-error' color = 'red' />}
				{!cookie.old && <Icon tooltip={__( "This cookie has recently been detected", "complianz-gdpr" )} name = 'calendar' color = 'green' />}
			</>
		)
	}

const getStyles = () => {
		if (!cookie.deleted) return;

return Object.assign(
			{},
			{"backgroundColor": "var(--rsp-red-faded)"},
		);
	}

);

}

export default memo(Cookie)