import React, {useEffect} from 'react';
import {__} from "@wordpress/i18n";
import type {Settings} from "../types/settings";
import {Button, CheckboxControl, SelectControl, TextControl} from "@wordpress/components";
import SubmitButton from "../components/submit-button";
import {Controller, useFormContext} from "react-hook-form";
import type {FormProps} from "../types/form-props";
import LockIcon from "../../../components/LockIcon";
import {FreemiusOverlay} from "../../../components/FreemiusOverlay";

const settings = (window as any).hulk_woo_pdil_settings as Settings;
const savedSettings = settings.saved_settings;
const wooLinks = settings.woo_links;

const descriptionPositionsOptions = Object
	.entries(settings.description_positions_options ?? {})
	.map(([value, label]) => ({
		label: label.replace(/&quot;/g, '"'),
		value: value
	}));

const descriptionContentOptions = Object
	.entries(settings.description_content_options ?? {})
	.map(([value, label]) => ({
		label: label,
		value: value
	}));

const General = () => {
	const {control, setValue, watch} = useFormContext<FormProps>();

	useEffect(() => {
		if (!savedSettings?.description_content) {
			setValue('description_content', descriptionContentOptions?.[0]?.value ?? '');
		}
		if (!savedSettings?.description_position) {
			setValue('description_position', descriptionPositionsOptions?.[0]?.value ?? '');
		}
	}, []);

	const pages = watch("enabled_pages") ?? [];
	const hasPages = pages?.length > 0;

	return (
		<>
			<table className={'form-table'}>
				<tbody>
				<tr>
					<th>
						<label htmlFor="enable-pages">
							{__('Select pages to enable description', 'product-description-in-loop-for-woocommerce')}
						</label>
					</th>
					<td>
						<div className={'flex flex-col gap-[5px] mt-[10px]'}>
							<Controller
								control={control}
								name={'enabled_pages'}
								render={({field}) => {
									const handleCheckbox = (option: string) => {
										if (field.value.includes(option)) {
											field.onChange(field.value.filter((v) => v !== option));
										} else {
											field.onChange([...field.value, option]);
										}
									};

									return (
										<>
											<CheckboxControl
												label={__('All archive pages', 'product-description-in-loop-for-woocommerce')}
												name={field.name}
												checked={field.value.includes('archive_pages')}
												onChange={() => handleCheckbox('archive_pages')}
												help={__('Enable this option to show the product description on the archive pages.', 'product-description-in-loop-for-woocommerce')}
											/>
											{!field.value.includes('archive_pages') && (
												<>
													<div className="checkbox-control-wrap">
														<CheckboxControl
															label={__('Shop page', 'product-description-in-loop-for-woocommerce')}
															name={field.name}
															checked={field.value.includes('shop_page')}
															onChange={() => handleCheckbox('shop_page')}
															help={__('Enable this option to show the product description on the shop page.', 'product-description-in-loop-for-woocommerce')}
														/>
														{field.value.includes('shop_page') && (
															<Button
																variant={'secondary'}
																href={wooLinks.shop_url}
																target={'_blank'}
																size={'small'}
																className={'view-button'}
															>
																View
															</Button>
														)}
													</div>
													<div className="checkbox-control-wrap">
														<CheckboxControl
															label={__('Category pages', 'product-description-in-loop-for-woocommerce')}
															name={field.name}
															checked={field.value.includes('category_pages')}
															onChange={() => handleCheckbox('category_pages')}
															help={__('Enable this option to show the product description on the category pages.', 'product-description-in-loop-for-woocommerce')}
														/>
														{field.value.includes('category_pages') && (
															<Button
																variant={'secondary'}
																href={wooLinks.category_url}
																target={'_blank'}
																size={'small'}
																className={'view-button'}
															>
																View
															</Button>
														)}
													</div>
													<div className="checkbox-control-wrap">
														<CheckboxControl
															label={__('Tag pages', 'product-description-in-loop-for-woocommerce')}
															name={field.name}
															checked={field.value.includes('tag_pages')}
															onChange={() => handleCheckbox('tag_pages')}
															help={__('Enable this option to show the product description on the tag pages.', 'product-description-in-loop-for-woocommerce')}
														/>
														{field.value.includes('tag_pages') && (
															<Button
																variant={'secondary'}
																href={wooLinks.tag_url}
																target={'_blank'}
																size={'small'}
																className={'view-button'}
															>
																View
															</Button>
														)}
													</div>
												</>
											)}
										</>
									);
								}}
							/>
						</div>
					</td>
				</tr>
				<tr>
					<th>
						<label htmlFor="description-position">
							{__('Description position', 'product-description-in-loop-for-woocommerce')}
							<LockIcon/>
						</label>
					</th>
					<td>
						<FreemiusOverlay>
							<Controller
								control={control}
								name={'description_position'}
								render={({field}) => (
									<SelectControl
										id={'description-position'}
										__next40pxDefaultSize
										name={field.name}
										className={'max-w-[350px]'}
										help={__('Specify where to show the description.', 'product-description-in-loop-for-woocommerce')}
										options={descriptionPositionsOptions}
										value={field.value}
										onBlur={field.onBlur}
										onChange={field.onChange}
										disabled={!hasPages}
									/>
								)}
							/>
						</FreemiusOverlay>
					</td>
				</tr>
				<tr>
					<th>
						<label htmlFor="description-content">
							{__('Description content', 'product-description-in-loop-for-woocommerce')}
							<LockIcon/>
						</label>
					</th>
					<td>
						<FreemiusOverlay>
							<Controller
								control={control}
								name={'description_content'}
								render={({field}) => (
									<SelectControl
										id={'description-content'}
										name={field.name}
										__next40pxDefaultSize
										className={'max-w-[350px]'}
										help={__('Specify which description to show.', 'product-description-in-loop-for-woocommerce')}
										options={descriptionContentOptions}
										value={field.value}
										onBlur={field.onBlur}
										onChange={field.onChange}
										disabled={!hasPages}
									/>
								)}
							/>
						</FreemiusOverlay>
					</td>
				</tr>
				<tr>
					<th>
						<label htmlFor="characters-limit">
							{__('Words limit', 'product-description-in-loop-for-woocommerce')}
							<LockIcon/>
						</label>
					</th>
					<td>
						<FreemiusOverlay>
							<Controller
								control={control}
								name={'word_limit'}
								render={({field}) => (
									<TextControl
										id={'word_limit'}
										name={field.name}
										className={'max-w-[350px]'}
										__next40pxDefaultSize
										help={__('Set the number of words. Set "0" to show all.', 'product-description-in-loop-for-woocommerce')}
										value={field.value ?? ''}
										onBlur={field.onBlur}
										onChange={field.onChange}
										disabled={!hasPages}
										placeholder={'50'}
										type={'number'}
										step={1}
										min={0}
									/>
								)}
							/>
						</FreemiusOverlay>
					</td>
				</tr>
				</tbody>
			</table>
			<SubmitButton/>
		</>
	);
};

export default General;
