import { __ } from "@wordpress/i18n";
import "./editor.scss";
import { RangeControl } from "@wordpress/components";

// import "./staff-member";

import {
	useBlockProps,
	RichText,
	InnerBlocks,
	InspectorControls,
} from "@wordpress/block-editor";
import { PanelBody, ToggleControl } from "@wordpress/components";

export default function Edit({ attributes, setAttributes, clientId }) {
	let { blockTitle, blockSubtitle, hasSubtitle, columnsAmount } = attributes;

	function onChangeBlockTitle(blockTitle) {
		setAttributes({ blockTitle });
	}
	function onChangeBlockSubtitle(blockSubtitle) {
		setAttributes({ blockSubtitle });
	}
	function onChangeColumnsAmount(columnsAmount) {
		setAttributes({ columnsAmount });
	}
	function onChangeHasSubtitle() {
		setAttributes({ hasSubtitle: !hasSubtitle });
	}

	return (
		<>
			<InspectorControls>
				<PanelBody
					title={__("Paramètres de la liste de membres", "homegrade-blocks")}
					className={"homegrade-blocks-timeline__panel-body"}
				>
					<RangeControl
						__nextHasNoMarginBottom
						label={__("Nombre de colonnes", "homegrade-blocks")}
						initialPosition={4}
						max={4}
						min={2}
						value={columnsAmount}
						onChange={onChangeColumnsAmount}
					/>
					<ToggleControl
						label={__("Afficher un sous-titre", "homegrade-blocks")}
						checked={hasSubtitle}
						onChange={onChangeHasSubtitle}
					/>
				</PanelBody>
			</InspectorControls>
			<section
				{...useBlockProps({
					className: `homegrade-blocks-staff-list`,
				})}
			>
				<div
					className={`section_titling section_titling--left section-titling--${
						hasSubtitle ? "has-subtitle" : "has-no-subtitle"
					}`}
				>
					<RichText
						value={blockTitle}
						tagName="h3"
						className="section_titling__title"
						placeholder={__(
							"Ajouter ici le Titre de la liste de membres",
							"homegrade",
						)}
						onChange={onChangeBlockTitle}
					/>
					{hasSubtitle && (
						<RichText
							value={blockSubtitle}
							tagName="h4"
							className="section_titling__subtitle"
							placeholder={__(
								"Ajouter ici le Sous-titre de la liste de membres",
								"homegrade",
							)}
							onChange={onChangeBlockSubtitle}
						/>
					)}
				</div>

				<ul
					className={`homegrade-blocks-staff-list__staff-list homegrade-blocks-staff-list__staff-list--grid-${columnsAmount}`}
				>
					<InnerBlocks
						allowedBlocks={["homegrade-content-blocks/staff-member"]}
					/>
				</ul>
			</section>
		</>
	);
}
