import { __ } from '@wordpress/i18n';
import Toggle from '../components/Toggle';
import SchemaSections from '../components/SchemaSections';

const UNINSTALL = [
	[ 'keep', 'Keep all data', 'Settings and calculated dates remain if you reinstall later' ],
	[ 'remove', 'Remove everything', 'Delete all plugin data from the database on uninstall' ],
];

export default function AdvancedTab( { state, dispatch, accent } ) {
	const s = state.settings;
	const set = ( key, value ) => dispatch( { type: 'SET_FIELD', key, value } );
	const uninstall = ( s.uninstall_cleanup ?? 'no' ) === 'yes' ? 'remove' : 'keep';

	return (
		<>
			<div className="edfw-card edfw-card--row">
				<div style={ { flex: 1 } }>
					<div className="edfw-card__title">{ __( 'Cache calculated dates', 'wpactpro-estimated-delivery-date' ) }</div>
					<div className="edfw-card__desc">{ __( 'Stores each calculated date for up to an hour so busy stores do less work per page load. The cache clears automatically whenever you save settings, so your changes always show right away. Leave this on unless you’re troubleshooting.', 'wpactpro-estimated-delivery-date' ) }</div>
				</div>
				<Toggle checked={ ( s.caching ?? 'yes' ) !== 'no' } accent={ accent } label={ __( 'Cache calculated dates', 'wpactpro-estimated-delivery-date' ) } onChange={ ( v ) => set( 'caching', v ? 'yes' : 'no' ) } />
			</div>

			<div className="edfw-card">
				<div className="edfw-card__title">{ __( 'When uninstalling', 'wpactpro-estimated-delivery-date' ) }</div>
				<div className="edfw-card__desc" style={ { marginBottom: 14 } }>{ __( 'What happens to your data if you delete the plugin from the Plugins screen. This has no effect when you simply deactivate it.', 'wpactpro-estimated-delivery-date' ) }</div>
				{ UNINSTALL.map( ( [ key, label, desc ] ) => {
					const sel = uninstall === key;
					return (
						<label className="edfw-radio-opt" key={ key } onClick={ () => set( 'uninstall_cleanup', key === 'remove' ? 'yes' : 'no' ) }>
							<span className="edfw-radio" style={ { borderColor: sel ? accent : '#c3c4c7' } }>
								<span className="edfw-radio__dot" style={ { background: sel ? accent : 'transparent' } } />
							</span>
							<div>
								<div className="edfw-radio-opt__label">{ __( label, 'wpactpro-estimated-delivery-date' ) }</div>
								<div className="edfw-radio-opt__desc">{ __( desc, 'wpactpro-estimated-delivery-date' ) }</div>
							</div>
						</label>
					);
				} ) }
			</div>
			<SchemaSections tab="advanced" state={ state } dispatch={ dispatch } accent={ accent } />
		</>
	);
}
