import { __ } from "@wordpress/i18n";
import {
	useBlockProps,
	InnerBlocks,
	InspectorControls,
	MediaUpload,
	MediaUploadCheck,
	BlockControls,
	MediaReplaceFlow,
} from "@wordpress/block-editor";
import { __experimentalHStack as HStack } from "@wordpress/components";

import {
	PanelBody,
	TextControl,
	Button,
	Placeholder,
	ToolbarButton,
	Icon,
	__experimentalToggleGroupControl as ToggleGroupControl,
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from "@wordpress/components";
import { file, link, external } from "@wordpress/icons";

import { MediaPlaceholder } from "@wordpress/block-editor";
import "./editor.scss";

export default function Edit({ attributes, setAttributes }) {
	const {
		isInitilized,
		documentType,
		documentUrl,
		documentId,
		UserhasValidatedExternalUrl,
		documentFileSize,
	} = attributes;

	const blockProps = useBlockProps({
		className: "document-card",
	});

	const hasDocument =
		(documentType === "internal" && documentId && documentUrl) ||
		(documentType === "external" && documentUrl && UserhasValidatedExternalUrl);

	const resetDocument = () => {
		setAttributes({
			documentId: 0,
			documentUrl: "",
			documentFileSize: 0,
			isInitilized: false,
			UserhasValidatedExternalUrl: false,
		});
	};

	const setInternalDocument = (media) => {
		const fileSize = media.filesizeInBytes || 0;
		const fileSizeInKB = Math.round(fileSize / 1024);

		setAttributes({
			documentType: "internal",
			documentFileSize: fileSizeInKB,
			documentId: media.id,
			documentUrl: media.url,
			isInitilized: true,
		});
	};

	const setExternalDocument = (url) => {
		setAttributes({
			documentType: "external",
			documentFileSize: 0,
			documentId: 0,
			documentUrl: url,
			isInitilized: true,
		});
	};

	return (
		<>
			<InspectorControls>
				<PanelBody title={__("Type de document", "carhop-blocks")}>
					<ToggleGroupControl
						label={__("Document relié", "carhop-blocks")}
						value={documentType}
						onChange={(value) => {
							setAttributes({ documentType: value, isInitilized: true });
							resetDocument();
						}}
					>
						<ToggleGroupControlOption
							label={__("PDF interne", "carhop-blocks")}
							value="internal"
						/>
						<ToggleGroupControlOption
							label={__("Lien externe", "carhop-blocks")}
							value="external"
						/>
					</ToggleGroupControl>
					{documentType === "external" && (
						<>
							<TextControl
								label={__("URL du document", "carhop-blocks")}
								value={documentUrl}
								onChange={(value) => setExternalDocument(value)}
								placeholder={__(
									"https://example.com/document.pdf",
									"carhop-blocks",
								)}
							/>
						</>
					)}

					{documentType === "internal" && (
						<MediaUploadCheck>
							<MediaUpload
								onSelect={(media) => {
									setInternalDocument(media);
								}}
								allowedTypes={["application/pdf"]}
								value={documentId}
								render={({ open }) => (
									<>
										{documentUrl ? (
											<div className="document-card__media-preview">
												<span
													style={{
														width: 48,
														height: 48,
														display: "flex",
														alignItems: "center",
													}}
												>
													<Icon icon={file} />
												</span>
												<span className="document-card__media-filename">
													{documentUrl.split("/").pop()?.split("?")[0] ||
														__("Document", "carhop-blocks")}
												</span>
												<div style={{ marginTop: 8 }}>
													<Button
														variant="secondary"
														onClick={open}
														style={{ marginRight: 8 }}
													>
														{__("Remplacer", "carhop-blocks")}
													</Button>
													<Button
														variant="tertiary"
														isDestructive
														onClick={() => resetDocument()}
													>
														{__("Supprimer", "carhop-blocks")}
													</Button>
												</div>
											</div>
										) : (
											<Button variant="secondary" onClick={open}>
												{__("Choisir un document", "carhop-blocks")}
											</Button>
										)}
									</>
								)}
							/>
						</MediaUploadCheck>
					)}
				</PanelBody>
			</InspectorControls>

			<div {...blockProps}>
				{!isInitilized && (
					<Placeholder
						icon={file}
						label={__("Document Card", "carhop-blocks")}
						instructions={__(
							"Choisissez le type de document que vous souhaitez afficher.",
							"carhop-blocks",
						)}
						className="document-card__initialization"
					>
						<HStack spacing={3} alignment="stretch" expanded={false}>
							<Button
								variant="primary"
								icon={file}
								onClick={() =>
									setAttributes({
										isInitilized: true,
										documentType: "internal",
									})
								}
							>
								{__("PDF interne", "carhop-blocks")}
							</Button>
							<Button
								variant="secondary"
								icon={link}
								onClick={() =>
									setAttributes({
										isInitilized: true,
										documentType: "external",
									})
								}
							>
								{__("Lien externe", "carhop-blocks")}
							</Button>
						</HStack>
					</Placeholder>
				)}

				{isInitilized &&
					documentType === "internal" &&
					!documentId &&
					!documentUrl && (
						<MediaPlaceholder
							icon="media-default"
							labels={{
								title: "Fichier",
								instructions:
									"Glissez-déposez, téléversez ou sélectionnez un fichier depuis votre médiathèque.",
							}}
							onSelect={(media) => setInternalDocument(media)}
							accept="application/pdf"
							allowedTypes={["application/pdf"]}
							multiple={false}
						/>
					)}

				{isInitilized &&
					documentType === "external" &&
					!UserhasValidatedExternalUrl && (
						<Placeholder
							icon={link}
							label={__("Lien externe", "carhop-blocks")}
							instructions={__(
								"Entrez l'URL du document (PDF, etc.) ou utilisez le panneau de réglages à droite.",
								"carhop-blocks",
							)}
							className="document-card__url-placeholder"
						>
							<TextControl
								value={documentUrl}
								onChange={(value) => setExternalDocument(value)}
								placeholder="https://example.com/document.pdf"
								style={{ minWidth: 320 }}
							/>
							<Button
								variant="secondary"
								onClick={() =>
									setAttributes({ UserhasValidatedExternalUrl: true })
								}
							>
								{__("Valider le lien", "carhop-blocks")}
							</Button>
						</Placeholder>
					)}

				{hasDocument && (
					<>
						<BlockControls group="other">
							{documentType === "internal" ? (
								<MediaReplaceFlow
									mediaId={documentId}
									mediaUrl={documentUrl}
									allowedTypes={["application/pdf"]}
									accept="application/pdf"
									onSelect={(media) => setInternalDocument(media)}
									name={__("Remplacer le document", "carhop-blocks")}
								/>
							) : null}
							<ToolbarButton onClick={() => resetDocument()}>
								{__("Supprimer le document", "carhop-blocks")}
							</ToolbarButton>
						</BlockControls>

						<div className="document-card__preview">
							<div className="document-card__content">
								<InnerBlocks
									allowedBlocks={[
										"core/heading",
										"core/paragraph",
										"core/list",
										"core/button",
										"core/buttons",
										"core/image",
										"core/embed",
										"core/quote",
										"core/pullquote",
										"core/media-text",
										"core/table",
										"core/group",
										"core/columns",
										"core/post-title",
										"carhop-blocks/cta",
										"carhop-blocks/heading",
										"carhop-blocks/cta-group",
										"carhop-blocks/audio-player",
										"carhop-blocks/content-box",
										"carhop-blocks/notice-panel",
										"shortcode",
									]}
									template={[
										[
											"carhop-blocks/heading",
											{},
											[
												[
													"core/heading",
													{
														content: "Titre du document",
														placeholder: "Saisir le titre",
													},
												],
												[
													"core/paragraph",
													{
														content: "Sous-titre du document",
														placeholder: "Saisir le sous-titre",
													},
												],
											],
										],
									]}
								/>

								<div className="file_info">
									<div className="file_info__type">
										{documentType === "internal" ? "PDF" : "Document externe"}
									</div>
									{documentFileSize > 0 && (
										<div className="file_info__size">
											( {documentFileSize} Ko )
										</div>
									)}
								</div>
							</div>
						</div>
					</>
				)}
			</div>
		</>
	);
}
