import React from 'react';
import {__} from "@wordpress/i18n";
import {ColorPalette, RadioControl, RangeControl, ToggleControl} from "@wordpress/components";
import type {Settings} from "../types/settings";
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 textAlignOptions = Object
	.entries(settings.text_align_options ?? {})
	.map(([value, label]) => ({
		label: label,
		value: value
	}));

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

	const enableStyle = watch('enable_style');

	return (
		<>
			<table className={'form-table'}>
				<tbody>
				<tr>
					<th>
						<label htmlFor="enable-style">
							{__('Enable style', 'product-description-in-loop-for-woocommerce')}
						</label>
					</th>
					<td>
						<Controller
							control={control}
							name={'enable_style'}
							render={({field}) => (
								<ToggleControl
									name={field.name}
									className={'enable-style'}
									label={__('Enable style', 'product-description-in-loop-for-woocommerce')}
									help={__('Enable this option to customize the appearance of descriptions.', 'product-description-in-loop-for-woocommerce')}
									checked={field.value}
									onChange={field.onChange}
								/>
							)}
						/>
					</td>
				</tr>
				<tr>
					<th>
						<label htmlFor="text-alignment">
							{__('Text alignment', 'product-description-in-loop-for-woocommerce')}
						</label>
					</th>
					<td>
						<Controller
							control={control}
							name={'text_align'}
							render={({field}) => (
								<RadioControl
									hideLabelFromVision={true}
									id={'text-alignment'}
									name={field.name}
									help={__('Choose the description text alignment.', 'product-description-in-loop-for-woocommerce')}
									options={textAlignOptions}
									selected={field.value}
									onChange={field.onChange}
									disabled={!enableStyle}
								/>
							)}
						/>
					</td>
				</tr>
				<tr>
					<th>
						<label htmlFor="font-size">
							{__('Font size', 'product-description-in-loop-for-woocommerce')}
							<LockIcon/>
						</label>
					</th>
					<td>
						<FreemiusOverlay>
							<Controller
								control={control}
								name={'font_size'}
								render={({field}) => (
									<RangeControl
										id={'font-size'}
										__next40pxDefaultSize
										name={field.name}
										help={__('Choose the font size.', 'product-description-in-loop-for-woocommerce')}
										initialPosition={16}
										max={100}
										min={0}
										value={field.value}
										onChange={(newValue) => field.onChange(newValue ?? 16)}
										allowReset={true}
										hideLabelFromVision={true}
										disabled={!enableStyle}
									/>
								)}
							/>
						</FreemiusOverlay>
					</td>
				</tr>
				<tr>
					<th>
						<label htmlFor="color-select">
							{__('Color', 'product-description-in-loop-for-woocommerce')}
							<LockIcon/>
						</label>
					</th>
					<td>
						<FreemiusOverlay>
							<div className="color-palette" aria-disabled={!enableStyle}>
								<Controller
									control={control}
									name={'text_color'}
									render={({field}) => (
										<ColorPalette
											id={'color-select'}
											value={field.value}
											onChange={(newValue) => field.onChange(newValue ?? '')}
											disableCustomColors={false}
											aria-disabled={!enableStyle}
										/>
									)}
								/>
							</div>
						</FreemiusOverlay>
					</td>
				</tr>
				</tbody>
			</table>
			<SubmitButton/>
		</>
	);
};

export default Style;
