import {__} from "@wordpress/i18n";
import React, {lazy, Suspense, useReducer, useState} from "react";
import {ToggleControl, Tooltip} from "@wordpress/components";
import localizeSettings from "./localizeSettings";
import ErrorBoundary from "../components/ErrorBoundary";
import Fallback from "../components/Fallback";
import SchemaConditionTooltip from "../components/SchemaConditionTooltip";
import {FreemiusOverlay} from "../components/FreemiusOverlay";
import {Icon, info} from "@wordpress/icons";
import LockIcon from "../components/LockIcon";

const CssEditor = lazy(() => import("../components/CssEditor"));

const conditions = localizeSettings.conditions;
const settings = localizeSettings.settings;
const homeUrl = localizeSettings.homeUrl;

type State = {
	productCondition: string;
	productConditionCustom: string;
	productConditionCustomGroup: string;
	productConditionLabel: string;
	showOnShopPage: boolean;
	productConditionShopLabel: string;
	productConditionCustomCss: string;
};

export {State as GlobalSettingsProps};

type Action = Partial<State>;

const AdminSettings = () => {
	const [state, dispatch] = useReducer(
		(prevState: State, action: Action) => ({...prevState, ...action}),
		{
			productCondition: "",
			productConditionCustom: "",
			productConditionCustomGroup: "",
			productConditionLabel: "",
			showOnShopPage: false,
			productConditionShopLabel: "",
			productConditionCustomCss: "",
			...settings,
		},
	);

	const [isFocused, setIsFocused] = useState(false);

	return (
		<>
			<input
				type="hidden"
				name={"productConditionCustomGroup"}
				defaultValue={state.productConditionCustomGroup}
			/>
			<input
				type="hidden"
				name={"productConditionCustom"}
				defaultValue={state.productConditionCustom}
			/>
			<input
				type="hidden"
				name={"productConditionShopLabel"}
				defaultValue={state.productConditionShopLabel}
			/>
			<input
				type="hidden"
				name={"productConditionLabel"}
				defaultValue={state.productConditionLabel}
			/>
			<table className="form-table">
				<tbody>
				<tr>
					<th scope="row">
						<label htmlFor="default-product-condition" className={'text-[14px]'}>
							{__(
								"Default Product Condition",
								"product-condition-manager-for-woocommerce",
							)}
						</label>
					</th>
					<td className="forminp forminp-select">
						<select
							name="productCondition"
							id="default-product-condition"
							value={state.productCondition}
							onChange={(event) => {
								dispatch({
									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>
						<p className="description ">
							{__(
								"Select the default condition",
								"product-condition-manager-for-woocommerce",
							)}
						</p>
					</td>
				</tr>
				{state.productCondition === "other" && (
					<tr>
						<th scope="row">
							<label htmlFor="productConditionCustom" className={'text-[14px]'}>
								{__(
									"Custom Condition",
									"product-condition-manager-for-woocommerce",
								)}
								<LockIcon className={'ml-[10px]'}/>
							</label>
						</th>
						<td className="forminp forminp-select">
							<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="productConditionCustomGroup" className={'text-[14px]'}>
												{__(
													"Schema Offer Item Condition",
													"product-condition-manager-for-woocommerce",
												)}
												<SchemaConditionTooltip/>
											</label>
											<a
												href="https://schema.org/OfferItemCondition"
												target={"_blank"}
												rel="noreferrer"
											>
												{__(
													"Read more",
													"product-condition-manager-for-woocommerce",
												)}
											</a>
										</div>
										<select
											id="productConditionCustomGroup"
											name="productConditionCustomGroup"
											value={
												state.productConditionCustomGroup
											}
											className={"w-full"}
											onChange={(event) => {
												dispatch({
													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="productConditionCustom" className={'text-[14px]'}>
											{__(
												"Product Custom Condition",
												"product-condition-manager-for-woocommerce",
											)}
										</label>
										<input
											type="text"
											className={'w-full'}
											id={"productConditionCustom"}
											name={"productConditionCustom"}
											value={state.productConditionCustom}
											onChange={(event) => {
												dispatch({
													productConditionCustom:
													event.target.value,
												});
											}}
										/>
									</div>
								</div>
							</FreemiusOverlay>
						</td>
					</tr>
				)}
				{state.productCondition && (
					<tr>
						<th scope="row">
							<label htmlFor="productConditionLabel" className={'text-[14px]'}>
								{__(
									"Product Condition Label",
									"product-condition-manager-for-woocommerce",
								)}
								<LockIcon className={'ml-[10px]'}/>
							</label>
						</th>
						<td className="forminp forminp-select">
							<FreemiusOverlay>
								<input
									id={"productConditionLabel"}
									name={"productConditionLabel"}
									value={state.productConditionLabel}
									onChange={(event) => {
										dispatch({
											productConditionLabel:
											event.target.value,
										});
									}}
									type="text"
									placeholder={__(
										"Product Condition:",
										"product-condition-manager-for-woocommerce",
									)}
								/>
							</FreemiusOverlay>
							<Tooltip
								delay={200}
								text={__(
									'This text appears before the product condition on the product page. By default, it says "Product Condition:"',
									"product-condition-manager-for-woocommerce",
								)}
								className={"components-tooltip-hulk_woo_pcm"}
							>
									<span
										className={
											"ml-2 text-[#666] align-middle inline-block"
										}
									>
										<Icon fill={"#666"} icon={info}/>
									</span>
							</Tooltip>
						</td>
					</tr>
				)}
				<tr>
					<th scope="row">
						<label htmlFor="showOnShopPage" className={'text-[14px] p-0'}>
							{__(
								"Show on Shop Page?",
								"product-condition-manager-for-woocommerce",
							)}
						</label>
					</th>
					<td className="forminp forminp-select py-[20px]">
						<input
							type="hidden"
							name="showOnShopPage"
							value={String(state.showOnShopPage)}
						/>
						<ToggleControl
							id="showOnShopPage"
							name="showOnShopPage"
							className={'[&_label]:!pt-0'}
							__nextHasNoMarginBottom
							label={
								<span>
										{__(
											"Enable this if you want the product condition shown on the",
											"product-condition-manager-for-woocommerce",
										)}
									&nbsp;
									<a
										href={`${homeUrl}/shop`}
										target={"_blank"}
										rel="noreferrer"
									>
											{__(
												"shop page.",
												"product-condition-manager-for-woocommerce",
											)}
										</a>
									</span>
							}
							checked={state.showOnShopPage}
							onChange={() => {
								dispatch({
									showOnShopPage: !state.showOnShopPage,
								});
							}}
						/>
					</td>
				</tr>
				{state.showOnShopPage && (
					<tr>
						<th scope="row">
							<label htmlFor="productConditionShopLabel" className={'text-[14px]'}>
								{__(
									"Shop Page Label",
									"product-condition-manager-for-woocommerce",
								)}
								<LockIcon className={'ml-[10px]'}/>
							</label>
						</th>
						<td className="forminp forminp-select">
							<FreemiusOverlay>
								<input
									id={"productConditionShopLabel"}
									name={"productConditionShopLabel"}
									value={state.productConditionShopLabel}
									onChange={(event) => {
										dispatch({
											productConditionShopLabel:
											event.target.value,
										});
									}}
									type="text"
									placeholder={__(
										"Product Condition:",
										"product-condition-manager-for-woocommerce",
									)}
								/>
							</FreemiusOverlay>
							<Tooltip
								delay={200}
								text={__(
									'This text appears before the product condition on shop and taxonomy pages. The default is "Product Condition:"',
									"product-condition-manager-for-woocommerce",
								)}
								className={"components-tooltip-hulk_woo_pcm"}
							>
									<span
										className={
											"ml-2 text-[#666] align-middle inline-block"
										}
									>
										<Icon fill={"#666"} icon={info}/>
									</span>
							</Tooltip>
						</td>
					</tr>
				)}
				<tr>
					<th scope="row">
						<label htmlFor="productConditionCustomCss" className={'text-[14px]'}>
							{__(
								"Custom CSS",
								"product-condition-manager-for-woocommerce",
							)}
							<LockIcon className={'ml-[10px]'}/>
						</label>
					</th>
					<td className="forminp forminp-select">
						<FreemiusOverlay>
							<input
								type="hidden"
								name="productConditionCustomCss"
								defaultValue={state.productConditionCustomCss}
							/>
							{isFocused ? (
								<ErrorBoundary>
									<Suspense fallback={<Fallback/>}>
										<CssEditor
											value={
												state.productConditionCustomCss
											}
											onChange={(value) => {
												dispatch({
													productConditionCustomCss:
													value,
												});
											}}
										/>
									</Suspense>
								</ErrorBoundary>
							) : (
								<textarea
									rows={8}
									className={"p-2"}
									id={"productConditionCustomCss"}
									name={"productConditionCustomCss"}
									value={state.productConditionCustomCss}
									onFocus={() => setIsFocused(true)}
									onChange={(event) => {
										dispatch({
											productConditionCustomCss:
											event.target.value,
										});
									}}
								/>
							)}
						</FreemiusOverlay>
					</td>
				</tr>
				</tbody>
			</table>
		</>
	);
};

export default AdminSettings;