import React, { useState, useEffect } from "react";
import { __, sprintf } from "@wordpress/i18n";
import apiFetch from '@wordpress/api-fetch';
import EditFont from "../fonts/edit/EditFont";
import { useSelector, useDispatch } from 'react-redux';
import Custom_Fonts_Icons from "@Common/svg-icons";


const ListItem = ({ item }) => {
	const [active, setActive] = useState(false);
	const [checkDelete, setCheckDelete] = useState(false);
	const [editFontId, setEditFontId] = useState(item.id);
	const [editFontType, setEditFontType] = useState(item['font-type'] ? item['font-type'] : 'local');
	const [editFontName, setEditFontName] = useState(item.title);
	const [openPopup, setOpenPopup] = useState(false);
	const [removeTitle, setRemoveTitle] = useState(__( 'Remove', 'custom-fonts'));

	const updatedEditData = useSelector( ( state ) => state.editFont );
	const [editFontData, setEditFontData] = useState(updatedEditData);

	const dispatch = useDispatch();

	useEffect( () => {
		if ( openPopup ) {
			setEditFontData( editFontData );
			dispatch( { type: 'SET_EDIT_FONT', payload: editFontData } );
		} else {
			setEditFontData( null );
			dispatch( { type: 'SET_EDIT_FONT', payload: null } );
		}
	}, [openPopup] );

	const deleteFontPost = ( e ) => {
		e.preventDefault();
		e.stopPropagation();

		setRemoveTitle(__( 'Removing...', 'custom-fonts'));
		const formData = new window.FormData();

		formData.append( 'action', 'bcf_delete_font' );
		formData.append( 'security', bsf_custom_fonts_admin.delete_font_nonce );
		formData.append( 'font_id', e.target.dataset.font_id );

		apiFetch( {
			url: bsf_custom_fonts_admin.ajax_url,
			method: 'POST',
			body: formData,
		} ).then( (response) => {
			if ( response.success ) {
				setTimeout( () => {
					window.location.reload();
				}, 500 );
			}
		} )
		.catch((error) => {
			console.error('Error during API request:', error);
		});
	};

	const getFontWeightTitle = ( weight, type, style ) => {
		if ( undefined === weight ) {
			weight = '400';
		}
		let updatedWeight = weight,
			oldWeight = ( 'google' === type ) ? weight : style;
		if ( 'italic' === weight ) {
			oldWeight = '400italic';
		}
		if ( oldWeight.includes('italic') ) {
			updatedWeight = `${oldWeight.replace('italic', '')} ` + __( 'Italic', 'custom-fonts' );
		}
		switch ( weight ) {
			case '100':
			case '100italic':
				return __( 'Thin ', 'custom-fonts' ) + updatedWeight;
			case '200':
			case '200italic':
				return __( 'Extra Light ', 'custom-fonts' ) + updatedWeight;
			case '300':
			case '300italic':
				return __( 'Light ', 'custom-fonts' ) + updatedWeight;
			case '400':
			case '400italic':
				return __( 'Regular ', 'custom-fonts' ) + updatedWeight;
			case '500':
			case '500italic':
				return __( 'Medium ', 'custom-fonts' ) + updatedWeight;
			case '600':
			case '600italic':
				return __( 'Semi Bold ', 'custom-fonts' ) + updatedWeight;
			case '700':
			case '700italic':
				return __( 'Bold ', 'custom-fonts' ) + updatedWeight;
			case '800':
			case '800italic':
				return __( 'Extra Bold ', 'custom-fonts' ) + updatedWeight;
			case '900':
			case '900italic':
				return __( 'Ultra-Bold ', 'custom-fonts' ) + updatedWeight;
			default:
				return updatedWeight;
		}
	}

	const setupEditFontScreen = (e) => {
		e.stopPropagation();

		const fontId = e.target.dataset.font_id;
		const fontType = e.target.dataset.font_type;
		const fontName = e.target.dataset.font_name;

		setOpenPopup(! openPopup);
		setEditFontId(fontId);
		setEditFontType(fontType);
		setEditFontName(fontName);
	}

	const getAssetDetail = ( fontItem ) => {
		const fontType = fontItem['font-type'] ? fontItem['font-type'] : 'local';
		if ( fontType === 'local' ) {
			return <style id={`bcf-custom-font-${fontItem.id}-css`}> {fontItem['fonts-face']} </style>
		} else {
			const fontName = fontItem.title.replace( / /g, "+" );
			return <link rel="stylesheet" id={`bcf-custom-font-${fontItem.id}-css`} href={`${bsf_custom_fonts_admin.googleFontAPI}=${fontName}&ver=${fontItem.id}`} media="all"></link>
		}
	}

	const getRenderFontWeight = (weight) => {
		if ( undefined === weight ) {
			weight = '400';
		}
		if ( weight.includes('italic') ) {
			return weight.replace( "italic", "" );
		}
		return weight;
	}

	const getFontAssetLink = (type, font, weight, version) => {
		if ( type === 'local' ) {
			return '';
		}
		const fontName = font.replace( / /g, "+" );
		return <link rel='stylesheet' id={`bcf-google-font-${version}-link`} href={`${bsf_custom_fonts_admin.googleFontAPI}=${fontName}:${weight}&display=fallback&ver=${version+1}`} media='all' />
	}

	const getFontStyle = (type, style, weight) => {
		let considerStyler = ( '' === type || 'local' === type ) ? style : weight;
		if ( undefined === considerStyler || '' === considerStyler ) {
			return 'normal';
		}
		if ( considerStyler.includes('italic') ) {
			return 'italic';
		}
		return style;
	}

	const expandFontItem = (e) => {
		e.preventDefault();
		e.stopPropagation();
		setActive(!active);
	}

	const setupDeleteFontPost = (e) => {
		e.preventDefault();
		e.stopPropagation();
		setCheckDelete(true)
	}

	const setupCancelDeletingFontPost = (e) => {
		e.preventDefault();
		e.stopPropagation();
		setCheckDelete(false);
	}

	return (
		<>
			<div className={`${active || checkDelete ? "bg-white active-state" : ""} bg-white transition-colors hover:bg-[#f6f7f7]`}>
				<div className="flex items-center title-area justify-between py-5 border-b border-light list-font-title hover:cursor-pointer" onClick={expandFontItem}>
					{ getAssetDetail(item) }
					<div className="flex items-center px-6 mobile:block">
					<h1 className="text-xl" style={{ fontFamily: item.title, fontWeight: "normal", fontSize: "1.5rem" }}> {item['fonts-data'].font_name} </h1>
						<div className="sm:ml-3 mobile:mt-3 text-sm"> {`(${item['fonts-data']['variations'] ? item['fonts-data']['variations'].length : 0} ${__( 'variants', 'custom-fonts' )})`} </div>
					</div>
					<div className="flex px-6">
						{checkDelete ? (
							<div className="flex gap-x-6">
								<div className="text-secondary cursor-pointer">
									{
										sprintf(
											/* translators: %s: Font name. */
											__( 'Remove "%s" font?', 'custom-fonts' ),
											item.title
										)
									}
								</div>
								<div
									onClick={setupCancelDeletingFontPost}
									className="text-neutral cursor-pointer"
								>
									{__('Cancel', 'custom-fonts')}
								</div>

								<div
									className="text-danger cursor-pointer"
									onClick={deleteFontPost}
									data-font_id={item.id}
									data-font_type={item['font-type']}
									data_font_name={item.title}
								>
									{removeTitle}
								</div>
							</div>
						) : (
							<div className="flex gap-x-6">
								<div
									onClick={setupEditFontScreen}
									data-font_id={item.id}
									data-font_type={item['font-type']}
									data_font_name={item.title}
									className="text-primary cursor-pointer"
								>
									{__('Edit', 'custom-fonts')}
								</div>

								<div
									onClick={setupDeleteFontPost}
									className="text-danger cursor-pointer"
								>
									{__('Remove', 'custom-fonts')}
								</div>
							</div>
						)}

						<div
							onClick={() => setActive(!active)}
							className="sm:ml-11 mobile:ml-2 cursor-pointer"
						>
							<span className={`${active ? "rotate-180" : ""
								} transition-transform duration-150 ease-in-out`}>
								{Custom_Fonts_Icons['dropdownlistitem']}
							</span>

						</div>
					</div>
				</div>
				{active && item['fonts-data']['variations'] && (
					<div className="px-6 list-font-variations bg-[#f6f7f7]">
						{
							item['fonts-data']['variations'].map(( varItem, varKey ) => (
								<div key={varKey} className="py-5 font-variation-item">
									{getFontAssetLink(item['font-type'], item.title, varItem.font_weight, varKey)}
									<div className="text-sm text-neutral mb-3 font-normal"> { getFontWeightTitle( varItem.font_weight, item['font-type'], varItem.font_style ) } </div>
									<h3 className="text-xl text-heading" style={{  fontFamily: item.title, fontSize: "1.3rem", fontStyle:getFontStyle(item['font-type'], varItem.font_style, varItem.font_weight), fontWeight: getRenderFontWeight(varItem.font_weight) }}>
										{__('How vexingly quick daft zebras jump!', 'custom-fonts')}
									</h3>
								</div>
							))
						}
					</div>
				)}
			</div>

			{
				<EditFont
					font={editFontId}
					fontType={editFontType}
					fontName={editFontName}
					openPopup={openPopup}
					setOpenPopup={setOpenPopup}
				/>
			}
		</>
	);
};

export default ListItem;
<!DOCTYPE html>
<html lang="en-US">
<head>
	<meta charset="UTF-8" />
	<title>Site is undergoing maintenance</title>	<link rel="icon" href="https://airpatrolnorth.ca/wp-content/uploads/2023/09/cropped-AP-favico-32x32.png" sizes="32x32" />
<link rel="icon" href="https://airpatrolnorth.ca/wp-content/uploads/2023/09/cropped-AP-favico-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://airpatrolnorth.ca/wp-content/uploads/2023/09/cropped-AP-favico-180x180.png" />
<meta name="msapplication-TileImage" content="https://airpatrolnorth.ca/wp-content/uploads/2023/09/cropped-AP-favico-270x270.png" />
	<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, minimum-scale=1">
	<meta name="description" content=""/>
	<meta http-equiv="X-UA-Compatible" content="" />
	<meta property="og:site_name" content="Air Patrol North Ltd. - "/>
	<meta property="og:title" content="Site is undergoing maintenance"/>
	<meta property="og:type" content="Maintenance"/>
	<meta property="og:url" content="https://airpatrolnorth.ca"/>
	<meta property="og:description" content="Thank you for your patience!"/>
				<meta property="og:image" content="https://airpatrolnorth.ca/wp-content/uploads/2023/09/cropped-new-logo-AP.png" />
			<meta property="og:image:url" content="https://airpatrolnorth.ca/wp-content/uploads/2023/09/cropped-new-logo-AP.png"/>
			<meta property="og:image:secure_url" content="https://airpatrolnorth.ca/wp-content/uploads/2023/09/cropped-new-logo-AP.png"/>
			<meta property="og:image:type" content="png"/>
			<link rel="profile" href="http://gmpg.org/xfn/11" />
	<link rel="pingback" href="https://airpatrolnorth.ca/xmlrpc.php" />
	<link rel='stylesheet' id='mtnc-style-css' href='https://airpatrolnorth.ca/wp-content/plugins/maintenance/load/css/style.css?ver=1760966316' media='all' />
<link rel='stylesheet' id='mtnc-fonts-css' href='https://airpatrolnorth.ca/wp-content/plugins/maintenance/load/css/fonts.css?ver=1760966316' media='all' />
<style type="text/css">body {background-color: #111111}.preloader {background-color: #111111}body {font-family: Open Sans; }.site-title, .preloader i, .login-form, .login-form a.lost-pass, .btn-open-login-form, .site-content, .user-content-wrapper, .user-content, footer, .maintenance a{color: #ffffff;} a.close-user-content, #mailchimp-box form input[type="submit"], .login-form input#submit.button  {border-color:#ffffff} input[type="submit"]:hover{background-color:#ffffff} input:-webkit-autofill, input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff} body &gt; .login-form-container{background-color:#111111}.btn-open-login-form{background-color:#111111}input:-webkit-autofill, input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 50px #111111 inset}input[type='submit']:hover{color:#111111} #custom-subscribe #submit-subscribe:before{background-color:#111111} </style>    
    <!--[if IE]><script type="text/javascript" src="https://airpatrolnorth.ca/wp-content/plugins/maintenance/load/js/jquery.backstretch.min.js"></script><![endif]--><link rel="stylesheet" href="https://fonts.bunny.net/css?family=Open%20Sans:300,300italic,regular,italic,600,600italic,700,700italic,800,800italic:300"></head>

<body class="maintenance ">

<div class="main-container">
	<div class="preloader"><i class="fi-widget" aria-hidden="true"></i></div>	<div id="wrapper">
		<div class="center logotype">
			<header>
				        <div class="logo-box" rel="home">
            <img src="https://airpatrolnorth.ca/wp-content/uploads/2023/09/cropped-new-logo-AP.png" srcset="https://airpatrolnorth.ca/wp-content/uploads/2023/09/cropped-new-logo-AP.png 2x" width="400"  alt="logo">
        </div>
    			</header>
		</div>
		<div id="content" class="site-content">
			<div class="center">
                <h2 class="heading font-center" style="font-weight:300;font-style:normal">Website is under maintenance</h2><div class="description" style="font-weight:300;font-style:normal"><p>Thank you for your patience!</p>
</div>			</div>
		</div>
	</div> <!-- end wrapper -->
	<footer>
		<div class="center">
			<div style="font-weight:300;font-style:normal">© Air Patrol North Ltd. 2025</div>		</div>
	</footer>
			</div>

<br />
<b>Deprecated</b>:  Function WP_Dependencies-&gt;add_data() was called with an argument that is <strong>deprecated</strong> since version 6.9.0! IE conditional comments are ignored by all supported browsers. in <b>/home/airpatrolnorth/public_html/wp-includes/functions.php</b> on line <b>6131</b><br />
<!--[if !IE]><!--><script src="https://airpatrolnorth.ca/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script>
<script src="https://airpatrolnorth.ca/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script>
<!--<![endif]--><script id="_frontend-js-extra">
var mtnc_front_options = {"body_bg":"","gallery_array":[],"blur_intensity":"5","font_link":["Open Sans:300,300italic,regular,italic,600,600italic,700,700italic,800,800italic:300"]};
//# sourceURL=_frontend-js-extra
</script>
<script src="https://airpatrolnorth.ca/wp-content/plugins/maintenance/load/js/jquery.frontend.js?ver=1760966316" id="_frontend-js"></script>

</body>
</html>