import React, {useReducer} from "react";
import localizeSettings from "./localizeSettings";
import {__} from "@wordpress/i18n";
import {Button} from "@wordpress/components";
import {external} from "@wordpress/icons";
import DisplayShopLabelTooltip from "../components/DisplayShopLabelTooltip";
import ProductConditionTooltip from "../components/ProductConditionTooltip";
import DisplayShopLabelNotice from "../components/DisplayShopLabelNotice";
import SchemaConditionTooltip from "../components/SchemaConditionTooltip";
import LockIcon from "../components/LockIcon";
import {FreemiusOverlay} from "../components/FreemiusOverlay";

const {DOCUMENTATION, conditions, settings, globalSettings} =
	localizeSettings;

type State = {
	hulk_woo_pcm_productCondition: string;
	hulk_woo_pcm_productConditionCustom: string;
	hulk_woo_pcm_productConditionCustomGroup: string;
	hulk_woo_pcm_productConditionLabel: string;
	hulk_woo_pcm_productConditionShopLabel: string;
};

type Action = Partial<State>;

const ProductDataMetaSettings = () => {
	const [state, dispatch] = useReducer(
		(prevState: State, action: Action) => ({...prevState, ...action}),
		{
			hulk_woo_pcm_productCondition: "",
			hulk_woo_pcm_productConditionCustom: "",
			hulk_woo_pcm_productConditionCustomGroup: "",
			hulk_woo_pcm_productConditionLabel: "",
			hulk_woo_pcm_productConditionShopLabel: "",
			...settings,
		},
	);

	return (
		<>
			<div className={"options_group p-2"}>
				<input
					type="hidden"
					name={`hulk_woo_pcm_productConditionCustomGroup`}
					defaultValue={state.hulk_woo_pcm_productConditionCustomGroup}
				/>
				<input
					type="hidden"
					name={`hulk_woo_pcm_productConditionCustom`}
					defaultValue={state.hulk_woo_pcm_productConditionCustom}
				/>
				<input
					type="hidden"
					name={`hulk_woo_pcm_productConditionLabel`}
					defaultValue={state.hulk_woo_pcm_productConditionLabel}
				/>
				<input
					type="hidden"
					name={`hulk_woo_pcm_productConditionShopLabel`}
					defaultValue={state.hulk_woo_pcm_productConditionShopLabel}
				/>
				<div className="tbl">
					<div className="row">
						<div className="cell">
							<label htmlFor={`hulk_woo_pcm_option`}>
								{__(
									"Display Product Condition",
									"product-condition-manager-for-woocommerce",
								)}
								<LockIcon className={'ml-[10px]'}/>
							</label>
						</div>
						<div className="cell">
							<FreemiusOverlay>
								<select
									className={
										"h-8 w-full min-w-0 border bg-transparent p-0 px-3"
									}
									id={`hulk_woo_pcm_option`}
									name={`hulk_woo_pcm_productCondition`}
									value={state.hulk_woo_pcm_productCondition}
									onChange={(event) => {
										dispatch({
											hulk_woo_pcm_productCondition:
											event.target.value,
										});
									}}
								>
									<option value="">
										--
										{__(
											"Select",
											"product-condition-manager-for-woocommerce",
										)}
										--
									</option>
									{Object.entries(conditions).map(
										([group, names]) => (
											<optgroup label={group} key={group}>
												{Object.entries(names).map(
													([key, value]) => (
														<option
															key={`${group}-${key}`}
															value={key}
														>
															{value}
														</option>
													),
												)}
											</optgroup>
										),
									)}
									<option value="other">
										{__(
											"Other",
											"product-condition-manager-for-woocommerce",
										)}
									</option>
								</select>
							</FreemiusOverlay>
						</div>
						<div className="cell">&nbsp;</div>
					</div>
					{state.hulk_woo_pcm_productCondition && (
						<>
							{state.hulk_woo_pcm_productCondition === "other" && (
								<div className="row">
									<div className="cell">
										<label
											htmlFor={`hulk_woo_pcm_productConditionCustom`}
										>
											{__(
												"Custom Condition",
												"product-condition-manager-for-woocommerce",
											)}
											<LockIcon className={'ml-[10px]'}/>
										</label>
									</div>
									<div className="cell">
										<FreemiusOverlay>
											<div
												className={
													"custom-condition-section"
												}
											>
												<div
													className={
														"mb-3 flex flex-col gap-1"
													}
												>
													<div className="flex items-center justify-between gap-2">
														<label
															htmlFor={`hulk_woo_pcm_productConditionCustomGroup`}
														>
															{__(
																"Schema Offer Item Condition",
																"product-condition-manager-for-woocommerce",
															)}
															<SchemaConditionTooltip/>
														</label>
														<a
															href="https://schema.org/OfferItemCondition"
															target={"_blank"}
															rel="noreferrer"
															className={"text-xs"}
														>
															{__(
																"Read more",
																"product-condition-manager-for-woocommerce",
															)}
														</a>
													</div>
													<select
														className={
															"h-8 w-full min-w-0 border bg-transparent p-0 px-3"
														}
														id={`hulk_woo_pcm_productConditionCustomGroup`}
														name={`hulk_woo_pcm_productConditionCustomGroup`}
														value={
															state.hulk_woo_pcm_productConditionCustomGroup
														}
														onChange={(event) => {
															dispatch({
																hulk_woo_pcm_productConditionCustomGroup:
																event.target
																	.value,
															});
														}}
													>
														<option value="">
															--
															{__(
																"Select",
																"product-condition-manager-for-woocommerce",
															)}
															--
														</option>
														{Object.entries(
															conditions,
														).map(([group]) => (
															<option
																key={`productConditionCustomGroup-${group}`}
																value={group}
															>
																{group}
															</option>
														))}
													</select>
												</div>
												<div
													className={
														"flex flex-col gap-1"
													}
												>
													<label
														htmlFor={`hulk_woo_pcm_productConditionCustom`}
													>
														{__(
															"Product Custom Condition",
															"product-condition-manager-for-woocommerce",
														)}
													</label>
													<input
														className={
															"h-8 w-full min-w-0 border bg-transparent p-0 px-3"
														}
														type="text"
														id={`hulk_woo_pcm_productConditionCustom`}
														name={`hulk_woo_pcm_productConditionCustom`}
														value={
															state.hulk_woo_pcm_productConditionCustom
														}
														onChange={(event) => {
															dispatch({
																hulk_woo_pcm_productConditionCustom:
																event.target
																	.value,
															});
														}}
													/>
												</div>
											</div>
										</FreemiusOverlay>
									</div>
								</div>
							)}
							<div className="row">
								<div className="cell">
									<label
										htmlFor={`hulk_woo_pcm_productConditionLabel`}
									>
										{__(
											"Display Label",
											"product-condition-manager-for-woocommerce",
										)}
										<LockIcon className={'ml-[10px]'}/>
									</label>
								</div>
								<div className="cell">
									<FreemiusOverlay className={'w-full'}>
										<input
											className={
												"h-8 w-full min-w-0 border bg-transparent p-0 px-3"
											}
											id={`hulk_woo_pcm_productConditionLabel`}
											name={`hulk_woo_pcm_productConditionLabel`}
											value={
												state.hulk_woo_pcm_productConditionLabel
											}
											onChange={(event) => {
												dispatch({
													hulk_woo_pcm_productConditionLabel:
													event.target.value,
												});
											}}
											type="text"
											placeholder={__(
												"Product Condition:",
												"product-condition-manager-for-woocommerce",
											)}
										/>
									</FreemiusOverlay>
								</div>
								<div className="cell !align-middle">
									<ProductConditionTooltip/>
								</div>
							</div>
							<div className="row">
								<div className="cell">
									<label
										htmlFor={`hulk_woo_pcm_productConditionShopLabel`}
									>
										{__(
											"Display Shop Label",
											"product-condition-manager-for-woocommerce",
										)}
										<LockIcon className={'ml-[10px]'}/>
									</label>
								</div>
								<div className="cell">
									<FreemiusOverlay className={'w-full'}>
										<input
											className={
												"h-8 w-full min-w-0 border bg-transparent p-0 px-3 read-only:!bg-gray-100"
											}
											id={`hulk_woo_pcm_productConditionShopLabel`}
											name={`hulk_woo_pcm_productConditionShopLabel`}
											value={
												state.hulk_woo_pcm_productConditionShopLabel
											}
											onChange={(event) => {
												dispatch({
													hulk_woo_pcm_productConditionShopLabel:
													event.target.value,
												});
											}}
											type="text"
											placeholder={__(
												"Product Condition:",
												"product-condition-manager-for-woocommerce",
											)}
											readOnly={
												!globalSettings.showOnShopPage
											}
										/>
									</FreemiusOverlay>
									{!globalSettings.showOnShopPage && (
										<DisplayShopLabelNotice/>
									)}
								</div>
								<div className="cell">
									<DisplayShopLabelTooltip/>
								</div>
							</div>
						</>
					)}
				</div>
			</div>
			<div className="hulk-suggestions-container">
				<Button
					href={
						"admin.php?page=wc-settings&tab=products&section=hulk_woo_pcm"
					}
					target={"_blank"}
					rel="noreferrer"
					size={"compact"}
					variant={"link"}
					icon={external}
				>
					{__(
						"Global Settings",
						"product-condition-manager-for-woocommerce",
					)}
				</Button>
				<Button
					href={DOCUMENTATION}
					target={"_blank"}
					rel="noreferrer"
					size={"compact"}
					variant={"link"}
					icon={external}
				>
					{__(
						"Documentation",
						"product-condition-manager-for-woocommerce",
					)}
				</Button>
			</div>
		</>
	);
};

export default ProductDataMetaSettings;