/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
 */
import { __ } from "@wordpress/i18n";

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import {
	useBlockProps,
	RichText,
	MediaUpload,
	InspectorControls,
	PanelColorSettings,
	InnerBlocks,
} from "@wordpress/block-editor";
import {
	BaseControl,
	Button,
	ButtonGroup,
	PanelBody,
	NumberControl,
	TextControl,
	__experimentalToggleGroupControl,
	__experimentalToggleGroupControlOption,
} from "@wordpress/components";
/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import "./editor.scss";

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {Element} Element to render.
 */

import { useEffect, useState } from "react";

import downArrow from "../../assets/icons/accordian-down-arrow.svg";

export default function Edit({ attributes, setAttributes }) {
	const TEMPLATE = [
		[
			"core/group",
			{
				className: "row align-items-center address-card",
				__experimentalRole: "content",
			},
			[
				[
					"core/image",
					{
						className: "col-md-6 p-0",
						placeholder: __("Upload image…", "text-domain"),
					},
				],
				[
					"core/group",
					{ className: "col-md-6" },
					[
						[
							"core/heading",
							{
								level: 4,
								placeholder: __("CITY NAME", "text-domain"),
								className: "fw-bold mb-1",
							},
						],
						[
							"core/heading",
							{
								level: 6,
								placeholder: __("Firm Name Goes Here", "text-domain"),
								className: "text-muted mb-3",
							},
						],
						[
							"core/paragraph",
							{
								placeholder: __(
									"1234 Your Road Name, City Name 22203",
									"text-domain",
								),
							},
						],
					],
				],
			],
		],
	];

	const blockProps = useBlockProps({
		className:"mb-3 location-map-child"
	});
	const { locationAddress } = attributes;

	return (
		<>
			<div {...blockProps}  >
				<InspectorControls>
					<PanelBody title={__("Location Settings")}>
						<TextControl
							label={__("Location Address")}
							value={locationAddress}
							onChange={(value) => setAttributes({ locationAddress: value })}
							help={__(
								"Enter the full address (e.g., 1234 Main St, City, State 12345).",
							)}
						/>
					</PanelBody>
				</InspectorControls>
				<InnerBlocks template={TEMPLATE} templateLock="all" />
			</div>
		</>
	);
}