import React, { useEffect, useState } from 'react';
import { useStateValue } from '../../../../store/store';
import { FontSelector } from '../../../../components/index';
import {
	sendPostMessage,
	getDefaultTypography,
	getHeadingFonts,
} from '../../../../utils/functions';
import { FONTS } from './other-fonts';

const getFontName = ( fontName, inheritFont ) => {
	if ( ! fontName ) {
		return '';
	}

	if ( fontName ) {
		const matches = fontName.match( /'([^']+)'/ );

		if ( matches ) {
			return matches[ 1 ];
		} else if ( 'inherit' === fontName ) {
			return inheritFont;
		}

		return fontName;
	}

	if ( inheritFont ) {
		return inheritFont;
	}
};

const TypographyWrapper = () => {
	const [ { typographyIndex, templateResponse }, dispatch ] = useStateValue();
	let [ fonts, setFonts ] = useState( FONTS );

	const head = getHeadingFonts( templateResponse );
	const [ headingFonts ] = useState( head );

	/**
	 * Add selected demo typograply as default typography
	 */
	useEffect( () => {
		const googleFontsURL = document.getElementById( 'google-fonts-url' );

		if ( templateResponse !== null ) {
			const defaultFonts = [];
			const defaultTypography = getDefaultTypography( templateResponse );
			defaultFonts.push( defaultTypography );

			if ( ! document.getElementById( 'google-fonts-domain' ) ) {
				const node = document.createElement( 'link' );
				node.id = 'google-fonts-domain';
				node.setAttribute( 'rel', 'preconnect' );
				node.setAttribute( 'href', 'https://fonts.gstatic.com' );
				document.head.appendChild( node );
			}

			// Removes existing Google fonts URL.
			if ( !! googleFontsURL ) {
				googleFontsURL.remove();
			}

			const node = document.createElement( 'link' );
			node.id = 'google-fonts-url';
			node.setAttribute( 'rel', 'stylesheet' );

			const fontsName = [];

			let bodyFont = defaultTypography[ 'body-font-family' ] || '';
			let bodyFontWeight =
				parseInt( defaultTypography[ 'body-font-weight' ] ) || '';
			if ( bodyFontWeight ) {
				bodyFontWeight = `:wght@${ bodyFontWeight }`;
			}

			if ( bodyFont ) {
				bodyFont = getFontName( bodyFont );
				bodyFont =
					undefined !== bodyFont
						? bodyFont.replace( ' ', '+' )
						: bodyFont;
				fontsName.push( `family=${ bodyFont }${ bodyFontWeight }` );
			}

			let headingFont = defaultTypography[ 'headings-font-family' ] || '';
			let headingFontWeight =
				parseInt( defaultTypography[ 'headings-font-weight' ] ) || '';

			if ( headingFontWeight ) {
				headingFontWeight = `:wght@${ headingFontWeight }`;
			}

			if ( headingFont ) {
				headingFont = getFontName( headingFont, bodyFont );
				headingFont =
					undefined !== headingFont
						? headingFont.replace( ' ', '+' )
						: headingFont;
				fontsName.push(
					`family=${ headingFont }${ headingFontWeight }`
				);
			}

			let otherFontsString = '';
			if ( !! fonts ) {
				for ( const font of fonts ) {
					const fontHeading = getFontName(
						font[ 'headings-font-family' ]
					).replaceAll( ' ', '+' );
					const fontHeadingWeight = font[ 'headings-font-weight' ];

					const fontBody = getFontName(
						font[ 'body-font-family' ]
					).replaceAll( ' ', '+' );
					const fontBodyWeight = font[ 'body-font-weight' ];

					otherFontsString += `&family=${ fontHeading }:wght@${ fontHeadingWeight }&family=${ fontBody }:wght@${ fontBodyWeight }`;
				}
				otherFontsString = otherFontsString.replace( /[&]{1}$/i, '' );
			}

			// Add Google fonts URL.
			if ( fontsName ) {
				const fontUrl = `https://fonts.googleapis.com/css2?${ fontsName.join(
					'&'
				) }${ otherFontsString }&display=swap`;

				node.setAttribute( 'href', fontUrl );
				document.head.insertAdjacentElement( 'afterbegin', node );
			}

			if ( 0 === typographyIndex ) {
				sendPreview( defaultTypography );
				dispatch( {
					type: 'set',
					typography: defaultTypography,
				} );
			}

			// Set default font.
			fonts = defaultFonts.concat( fonts );

			setFonts( fonts );
		}
	}, [ templateResponse ] );

	const sendPreview = ( typography ) => {
		const newTypography = headingFonts
			? { ...typography, ...headingFonts }
			: typography;

		sendPostMessage( {
			param: 'siteTypography',
			data: JSON.parse( JSON.stringify( newTypography ) ),
		} );
	};

	return (
		<div className="typography-section">
			<FontSelector
				selected={ typographyIndex }
				options={ fonts }
				onSelect={ ( event, selectedFont ) => {
					const typography = fonts[ selectedFont ] || fonts[ 0 ];
					sendPreview( typography );
					dispatch( {
						type: 'set',
						typographyIndex: selectedFont,
						typography,
					} );
				} }
			/>
		</div>
	);
};

export default TypographyWrapper;
/*
----------------------------------------------------------------

formreset.css
Gravity Forms CSS Reset
http://www.gravityforms.com
updated: March 15, 2015 1:41 PM

Gravity Forms is a Rocketgenius project
copyright 2008-2015 Rocketgenius Inc.
http: //www.rocketgenius.com
this may not be redistributed without the
express written permission of the author.

NOTE: DO NOT EDIT THIS FILE! MAKE ANY MODIFICATIONS IN YOUR
THEME STYLESHEET. THIS FILE IS REPLACED DURING AUTO-UPDATES
AND ANY CHANGES MADE HERE WILL BE OVERWRITTEN.

If you need to make extensive customizations,
copy the contents of this file to your theme
style sheet for editing. Then, go to the form
settings page & set the 'output CSS' option
to no.

----------------------------------------------------------------
*/

body .gform_wrapper.gf_reset_wrapper, body .gform_wrapper.gf_reset_wrapper div, body .gform_wrapper.gf_reset_wrapper span, body .gform_wrapper.gf_reset_wrapper iframe, body .gform_wrapper.gf_reset_wrapper h1, body .gform_wrapper.gf_reset_wrapper h2, body .gform_wrapper.gf_reset_wrapper h3, body .gform_wrapper.gf_reset_wrapper h4, body .gform_wrapper.gf_reset_wrapper h5, body .gform_wrapper.gf_reset_wrapper h6, body .gform_wrapper.gf_reset_wrapper p, body .gform_wrapper.gf_reset_wrapper img, body .gform_wrapper.gf_reset_wrapper ol, body .gform_wrapper.gf_reset_wrapper ul, body .gform_wrapper.gf_reset_wrapper li, body .gform_wrapper.gf_reset_wrapper fieldset, body .gform_wrapper.gf_reset_wrapper form, body .gform_wrapper.gf_reset_wrapper label, body .gform_wrapper.gf_reset_wrapper legend, body .gform_wrapper.gf_reset_wrapper input[type=text], body .gform_wrapper.gf_reset_wrapper input[type=email], body .gform_wrapper.gf_reset_wrapper input[type=tel], body .gform_wrapper.gf_reset_wrapper input[type=url], body .gform_wrapper.gf_reset_wrapper input[type=number], body .gform_wrapper.gf_reset_wrapper input[type=password], body .gform_wrapper.gf_reset_wrapper select, body .gform_wrapper.gf_reset_wrapper textarea, body .gform_wrapper.gf_reset_wrapper input[type=submit], body .gform_wrapper.gf_reset_wrapper input[type=button], body .gform_wrapper.gf_reset_wrapper input[type=image], body .gform_wrapper.gf_reset_wrapper button, body .gform_wrapper.gf_reset_wrapper table, body .gform_wrapper.gf_reset_wrapper caption, body .gform_wrapper.gf_reset_wrapper tbody, body .gform_wrapper.gf_reset_wrapper tfoot, body .gform_wrapper.gf_reset_wrapper thead, body .gform_wrapper.gf_reset_wrapper tr, body .gform_wrapper.gf_reset_wrapper th, body .gform_wrapper.gf_reset_wrapper td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}
body .gform_wrapper.gf_reset_wrapper div, body .gform_wrapper.gf_reset_wrapper span, body .gform_wrapper.gf_reset_wrapper iframe, body .gform_wrapper.gf_reset_wrapper p, body .gform_wrapper.gf_reset_wrapper img, body .gform_wrapper.gf_reset_wrapper ol, body .gform_wrapper.gf_reset_wrapper ul, body .gform_wrapper.gf_reset_wrapper li, body .gform_wrapper.gf_reset_wrapper fieldset, body .gform_wrapper.gf_reset_wrapper form, body .gform_wrapper.gf_reset_wrapper label, body .gform_wrapper.gf_reset_wrapper legend, body .gform_wrapper.gf_reset_wrapper input[type=text], body .gform_wrapper.gf_reset_wrapper input[type=email], body .gform_wrapper.gf_reset_wrapper input[type=tel], body .gform_wrapper.gf_reset_wrapper input[type=url], body .gform_wrapper.gf_reset_wrapper input[type=number], body .gform_wrapper.gf_reset_wrapper input[type=password], body .gform_wrapper.gf_reset_wrapper select, body .gform_wrapper.gf_reset_wrapper textarea, body .gform_wrapper.gf_reset_wrapper input[type=submit], body .gform_wrapper.gf_reset_wrapper input[type=button], body .gform_wrapper.gf_reset_wrapper input[type=image], body .gform_wrapper.gf_reset_wrapper button, body .gform_wrapper.gf_reset_wrapper table, body .gform_wrapper.gf_reset_wrapper caption, body .gform_wrapper.gf_reset_wrapper tbody, body .gform_wrapper.gf_reset_wrapper tfoot, body .gform_wrapper.gf_reset_wrapper thead, body .gform_wrapper.gf_reset_wrapper tr, body .gform_wrapper.gf_reset_wrapper th, body .gform_wrapper.gf_reset_wrapper td {
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    line-height: 1;
    font-weight: normal;
}
body .gform_wrapper.gf_reset_wrapper div, body .gform_wrapper.gf_reset_wrapper span, body .gform_wrapper.gf_reset_wrapper p { line-height: 1.8 }
body .gform_wrapper.gf_reset_wrapper fieldset, body .gform_wrapper.gf_reset_wrapper img { border: 0 }
body .gform_wrapper.gf_reset_wrapper ol, body .gform_wrapper.gf_reset_wrapper ul, body .gform_wrapper.gf_reset_wrapper li { list-style: none }
body .gform_wrapper.gf_reset_wrapper a img { border: none }
body .gform_wrapper.gf_reset_wrapper :focus { outline: 0 }