/*
 * Icon Picker
 */

import { useState, useRef } from 'react';
import { Button, TextControl } from '@wordpress/components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { allIcons } from './FontAwesomeIcons';

const defaultIcons = [
	{ name: 'faUser', icon: [ 'fas', 'user' ] },
	{ name: 'faFacebook', icon: [ 'fab', 'facebook' ] },
	{ name: 'faInstagram', icon: [ 'fab', 'instagram' ] },
	{ name: 'faTwitter', icon: [ 'fab', 'twitter' ] },
	{ name: 'faLinkedin', icon: [ 'fab', 'linkedin' ] },
	{ name: 'faGithub', icon: [ 'fab', 'github' ] },
	{ name: 'faDiscord', icon: [ 'fab', 'discord' ] },
	{ name: 'faYoutube', icon: [ 'fab', 'youtube' ] },
	{ name: 'faTiktok', icon: [ 'fab', 'tiktok' ] },
	{ name: 'faAirbnb', icon: [ 'fab', 'airbnb' ] },
	{ name: 'faGoogle', icon: [ 'fab', 'google' ] },
	{ name: 'faApple', icon: [ 'fab', 'apple' ] },
	{ name: 'faDribbble', icon: [ 'fab', 'dribbble' ] },
	{ name: 'faCodepen', icon: [ 'fab', 'codepen' ] },
	{ name: 'faVimeo', icon: [ 'fab', 'vimeo' ] },
	{ name: 'faWhatsapp', icon: [ 'fab', 'whatsapp' ] },
	{ name: 'faTelegram', icon: [ 'fab', 'telegram' ] },
	{ name: 'faPinterest', icon: [ 'fab', 'pinterest' ] },
	{ name: 'faGitlab', icon: [ 'fab', 'gitlab' ] },
	{ name: 'faSpotify', icon: [ 'fab', 'spotify' ] },
	{ name: 'faTumblr', icon: [ 'fab', 'tumblr' ] },
	{ name: 'faPhone', icon: [ 'fas', 'phone' ] },
	{ name: 'faInbox', icon: [ 'fas', 'inbox' ] },
	{ name: 'faVideo', icon: [ 'fas', 'video' ] },
	{ name: 'faWifi', icon: [ 'fas', 'wifi' ] },
	{ name: 'faGlobe', icon: [ 'fas', 'globe' ] },
	{ name: 'faCompass', icon: [ 'fas', 'compass' ] },
	{ name: 'faDatabase', icon: [ 'fas', 'database' ] },
	{ name: 'faPerson', icon: [ 'fas', 'person' ] },
	{ name: 'faUsers', icon: [ 'fas', 'users' ] },
];

const IconPicker = ( { onSelectIcon, handleClear, setAttributes } ) => {
	const [ searchTerm, setSearchTerm ] = useState( '' );
	const fileInputRef = useRef( null );

	const filteredIcons = allIcons.filter( icon =>
		icon.name.toLowerCase().includes( searchTerm.toLowerCase() )
	);

	const iconsToDisplay = searchTerm ? filteredIcons : defaultIcons;

	const handleIconSelect = ( icon ) => {
		if ( icon ) {
			if ( Array.isArray( icon.icon ) ) {
				// For FontAwesome icons in array format (like from default icons)
				onSelectIcon( {
					iconName: icon.icon[ 1 ],
					prefix: icon.icon[ 0 ],
					svg: "" // Clear SVG for FontAwesome
				} );
				setAttributes( {
					buttonIcon: {
						iconName: icon.icon[ 1 ],
						prefix: icon.icon[ 0 ],
						svg: ""
					},
					isFontAwesome: true
				} );
			} else if ( icon.icon && icon.icon.prefix ) {
				// For the structure returned from search (object with iconName and prefix)
				onSelectIcon( {
					iconName: icon.icon.iconName,
					prefix: icon.icon.prefix,
					svg: "" // Clear SVG for FontAwesome
				} );
				setAttributes( {
					buttonIcon: {
						iconName: icon.icon.iconName,
						prefix: icon.icon.prefix,
						svg: ""
					},
					isFontAwesome: true
				} );
			} else {
				// Handle custom SVG or other structures here
				onSelectIcon( {
					iconName: icon.iconName || "",
					prefix: icon.prefix || "",
					svg: icon.svg || ""
				} );
				setAttributes( {
					buttonIcon: {
						iconName: icon.iconName || "",
						prefix: icon.prefix || "",
						svg: icon.svg || ""
					},
					isFontAwesome: !!icon.iconName
				} );
			}
		} else {
			onSelectIcon( null );
			setAttributes( {
				buttonIcon: { iconName: "", prefix: "", svg: "" },
				isFontAwesome: false
			} );
		}
	};

	const handleSVGUpload = ( files ) => {
		if ( files && files[ 0 ] ) {
			const file = files[ 0 ];
			const reader = new FileReader();

			reader.onload = ( event ) => {
				const svgContent = event.target.result;
				onSelectIcon( {
					iconName: "", // Clear iconName for custom SVG
					prefix: "", // Clear prefix for custom SVG
					svg: svgContent, // Set the SVG content
				} );
			};

			reader.readAsText( file );
		}
	};

	return (
		<div className="ssmb-icon-picker">
			<TextControl
				placeholder = "Search icons"
				value = { searchTerm }
				onChange = { ( value ) => setSearchTerm( value ) }
				__nextHasNoMarginBottom = { true }
			/>
			<div className="ssmb-icon-list">
				{ iconsToDisplay.map( ( icon, index ) => (
					<Button
						key = { index }
						className="ssmb-icon-button"
						onClick = { () => {
							handleIconSelect( icon );
						} }
					>
						<FontAwesomeIcon icon = { icon.icon} size = "2x" />
					</Button>
				) ) }
			</div>
			<div className="ssmb-icon-actions">
				<Button variant = "secondary" onClick = { handleClear }>
                    Clear Icon
				</Button>
				<input
					type = "file"
					accept = "image/svg+xml"
					ref = { fileInputRef } // Attach ref to the input
					style = { { display: 'none' } } // Hide the input element
					onChange = { ( event ) => handleSVGUpload( event.target.files ) }
				/>
				<Button
					className="button"
					onClick = { () => fileInputRef.current.click() } // Use ref to trigger click
				>
                    Upload SVG
				</Button>
			</div>
		</div>
	);
};

export default IconPicker;
