const { registerBlockType } = wp.blocks;

import ajaxSearch from './ajax-search';
import searchSuggestions from './search-suggestions';

registerBlockType( 'jet-search/ajax-search', {
	edit: ajaxSearch,
	icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M10.125 15.375C13.2316 15.375 15.75 12.8566 15.75 9.75C15.75 6.6434 13.2316 4.125 10.125 4.125C7.0184 4.125 4.5 6.6434 4.5 9.75C4.5 12.8566 7.0184 15.375 10.125 15.375Z" fill="white" stroke="black" strokeWidth="2"/>
	<path d="M14.0303 13.5L15.3561 14.8258L14.8258 15.3561L13.5 14.0303L14.0303 13.5Z" fill="black"/>
	<path d="M15.343 15.343C15.8003 14.8857 16.5418 14.8857 16.9991 15.343L19.532 17.8759C19.9893 18.3332 19.9893 19.0747 19.532 19.532C19.0747 19.9893 18.3332 19.9893 17.8759 19.532L15.343 16.9991C14.8857 16.5418 14.8857 15.8003 15.343 15.343Z" fill="#4AF3BA" stroke="black"/>
	</svg>,
	save: props => {
		return null;
	},
} );

registerBlockType( 'jet-search/search-suggestions', {
	edit: searchSuggestions,
	icon: <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path fill-rule="evenodd" clip-rule="evenodd" d="M21.9601 18.6566C24.8449 21.5414 25.066 26.0811 22.6235 29.2195L27.3536 33.9496C27.7441 34.3401 27.7441 34.9733 27.3536 35.3638C26.963 35.7543 26.3299 35.7543 25.9394 35.3638L21.2092 30.6337C18.0708 33.0762 13.5311 32.855 10.6464 29.9703C7.52223 26.8461 7.52223 21.7808 10.6464 18.6566C13.7706 15.5324 18.8359 15.5324 21.9601 18.6566ZM20.5459 28.5561C22.8891 26.213 22.8891 22.414 20.5459 20.0708C18.2028 17.7277 14.4038 17.7277 12.0606 20.0708C9.7175 22.414 9.7175 26.213 12.0606 28.5561C14.4038 30.8993 18.2028 30.8993 20.5459 28.5561Z" fill="#0F172A"/>
	<path fill-rule="evenodd" clip-rule="evenodd" d="M6 10C3.79086 10 2 11.7909 2 14V38C2 40.2091 3.79086 42 6 42H58C60.2091 42 62 40.2091 62 38V14C62 11.7909 60.2091 10 58 10H6ZM58 12H6C4.89543 12 4 12.8954 4 14V38C4 39.1046 4.89543 40 6 40H58C59.1046 40 60 39.1046 60 38V14C60 12.8954 59.1046 12 58 12Z" fill="#0F172A"/>
	<path d="M7 46C6.44772 46 6 46.4477 6 47C6 47.5523 6.44772 48 7 48H57C57.5523 48 58 47.5523 58 47C58 46.4477 57.5523 46 57 46H7Z" fill="#0F172A"/>
	<path d="M7 52C6.44772 52 6 52.4477 6 53C6 53.5523 6.44772 54 7 54H34C34.5523 54 35 53.5523 35 53C35 52.4477 34.5523 52 34 52H7Z" fill="#0F172A"/>
	</svg>,
	save: props => {
		return null;
	},
} );