/*
 * Button Link/URL Panel
 */

import { __ } from '@wordpress/i18n';
import { useState } from 'react';
import { PanelBody, BaseControl, TextControl, ToggleControl } from '@wordpress/components';
import { useIconPanelBodyClass } from '../../../components/IconPanelIndicator';
import ResetIconButton from '../../../components/ResetIconButton';
import { isValidUrl } from '../../../utilities/general-utils';

export default function ButtonLinkPanel( { attributes, setAttributes } ) {
	const { buttonIconLink, openInNewTab, linkRel, linkTitle } = attributes;
	const [isValidLink, setIsValidLink] = useState( true );

	// Use the custom hook to handle the panel class update
	useIconPanelBodyClass( attributes, [
		'buttonIconLink', 'openInNewTab', 'linkRel', 'linkTitle'
	], 'desktop', __( 'Link', 'smart-social-media-buttons' ) );

	const resetButtonIconLink = () => {
		setAttributes( { buttonIconLink: '' } );
		setLinkInputValue( '' ); // To update the toolbar state
	};
	const resetOpenInNewTab = () => setAttributes( { openInNewTab: false } );
	const resetLinkRel = () => setAttributes( { linkRel: '' } );
	const resetLinkTitle = () => setAttributes( { linkTitle: '' } );

	// Helper to check URL validity
	const isValidUrl = ( url ) => {
		if ( !url || url.startsWith( '#' ) ) {return true;} // Allow empty or anchor links
		try {
			new URL( url );
			return true;
		} catch {
			return false;
		}
	};

	// Handle URL changes with validation
	const handleUrlChange = ( url ) => {
		const isValid = isValidUrl( url );
		setIsValidLink( isValid );
		setAttributes( { buttonIconLink: url } );
	};

	return (
		<>
			<PanelBody title = { __( 'Link', 'smart-social-media-buttons' ) } initialOpen = { false }>
				<BaseControl className="ssmb-button-link" __nextHasNoMarginBottom = { true }>
					<div className="ssmb-control-wrapper">
						<TextControl
							value = { buttonIconLink }
							onChange = { handleUrlChange }
							placeholder = { __( 'Enter a URL or #anchor', 'smart-social-media-buttons' ) }
							help = { !isValidLink && __( 'Please enter a valid URL (e.g., https://example.com) or #anchor.', 'smart-social-media-buttons' ) }
							__nextHasNoMarginBottom = { true }
						/>
						<ResetIconButton
							currentAttributes = { attributes }
							attributeKeys = { ['buttonIconLink'] }
							setAttributes = { setAttributes }
							onClick = { resetButtonIconLink }
							label = { __( 'Reset Icon Link', 'smart-social-media-buttons' ) }
							panelTitle = { __( 'Link', 'smart-social-media-buttons' ) }
							blockType = 'ssmb/icon-button'
						/>
					</div>
				</BaseControl>

				{/* Open in New Tab Toggle */}
				<BaseControl className="ssmb-button-link-openInNewTab" __nextHasNoMarginBottom = { true }>
					<div className="ssmb-control-wrapper">
						<ToggleControl
							label = { __( 'Open in new tab', 'smart-social-media-buttons' ) }
							checked = { openInNewTab }
							onChange = { ( newValue ) => setAttributes( { openInNewTab: newValue } ) }
							__nextHasNoMarginBottom = { true }
						/>
						<ResetIconButton
							currentAttributes = { attributes }
							attributeKeys = { ['openInNewTab'] }
							setAttributes = { setAttributes }
							onClick = { resetOpenInNewTab }
							panelTitle = { __( 'Link', 'smart-social-media-buttons' ) }
							blockType = 'ssmb/icon-button'
						/>
					</div>
				</BaseControl>

				{/* Link Rel */}
				<BaseControl className="ssmb-button-linkRel" __nextHasNoMarginBottom = { true }>
					<div className="ssmb-control-wrapper">
						<TextControl
							label = { __( 'Link rel', 'smart-social-media-buttons' ) }
							value = { linkRel }
							onChange = { ( newValue ) => setAttributes( { linkRel: newValue } ) }
							help = { __( 'Link relationship keywords, e.g., nofollow noreferrer prefetch', 'smart-social-media-buttons' ) }
							__nextHasNoMarginBottom = { true }
						/>
						<ResetIconButton
							currentAttributes = { attributes }
							attributeKeys = { ['linkRel'] }
							setAttributes = { setAttributes }
							onClick = { resetLinkRel }
							panelTitle = { __( 'Link', 'smart-social-media-buttons' ) }
							blockType = 'ssmb/icon-button'
						/>
					</div>
				</BaseControl>

				{/* Link Title */}
				<BaseControl className="ssmb-button-linkTitle" __nextHasNoMarginBottom = { true }>
					<div className="ssmb-control-wrapper">
						<TextControl
							label = { __( 'Link Title', 'smart-social-media-buttons' ) }
							value = { linkTitle }
							onChange = { ( newValue ) => setAttributes( { linkTitle: newValue } ) }
							__nextHasNoMarginBottom = { true }
						/>
						<ResetIconButton
							currentAttributes = { attributes }
							attributeKeys = { ['linkTitle'] }
							setAttributes = { setAttributes }
							onClick = { resetLinkTitle }
							panelTitle = { __( 'Link', 'smart-social-media-buttons' ) }
							blockType = 'ssmb/icon-button'
						/>
					</div>
				</BaseControl>
			</PanelBody>
		</>
	);
}
