import { render } from '@wordpress/element';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
import { __ } from '@wordpress/i18n';
import { Panel, PanelBody, PanelRow, ColorPicker, RangeControl, Button, Notice, TextControl, DuotonePicker, DuotoneSwatch, ToggleControl  } from '@wordpress/components';
import { useState, useEffect } from 'react';
import apiFetch from '@wordpress/api-fetch';

const SettingsPage = () => {
	const [color, setColor] = useState(fsdpeEventsSettings.settings.color);
	const [size, setSize] = useState(fsdpeEventsSettings.settings.size);
	const [notice, setNotice] = useState('');

	const [cptSlug, setCptSlug] = useState(fsdpeEventsSettings.settings.cptslug);

	// Card design
	const [cardBRColor, setCardBRColor] = useState(fsdpeEventsSettings.settings.card_brcolor);
	const [cardRadius, setCardRadius] = useState(fsdpeEventsSettings.settings.card_radius);

	// Calendar design
	const [calendarBG, setCalendarBG] = useState(fsdpeEventsSettings.settings.calendar_bg);
	const [calendarTextColor, setCalendarTextColor] = useState(fsdpeEventsSettings.settings.calendar_text_color);
	const [calendarTextSize, setCalendarTextSize] = useState(fsdpeEventsSettings.settings.calendar_text_size);
	const [calendarDayBG, setCalendarDayBG] = useState(fsdpeEventsSettings.settings.calendar_day_bg);
	const [calendarActiveBG, setCalendarActiveBG] = useState(fsdpeEventsSettings.settings.calendar_active_bg);
	const [calendarHoverBG, setCalendarHoverBG] = useState(fsdpeEventsSettings.settings.calendar_hover_bg);

	const [ duotone, setDuotone ] = useState( fsdpeEventsSettings.settings.duotonepicker );
	const [ borderRadius, setBorderRadius ] = useState( fsdpeEventsSettings.settings.borderradius );

	const [value, onChange] = useState(new Date());

	const saveSettings = () => {
		apiFetch({
			path: '/wp/v2/settings',
			method: 'POST',
			data: {
				fsdpe_events_color: color,
				fsdpe_events_size: size,
				fsdpe_events_cptslug: cptSlug,
				fsdpe_events_card_brcolor: cardBRColor,
				fsdpe_events_card_radius: cardRadius,
				fsdpe_events_calendar_bg: calendarBG,
				fsdpe_events_calendar_text_color: calendarTextColor,
				fsdpe_events_calendar_text_size: calendarTextSize,
				fsdpe_events_calendar_day_bg: calendarDayBG,
				fsdpe_events_calendar_active_bg: calendarActiveBG,
				fsdpe_events_calendar_hover_bg: calendarHoverBG,
				fsdpe_events_duotonepicker: duotone,
				fsdpe_events_borderradius: borderRadius,
			},
			headers: {
				'X-WP-Nonce': fsdpeEventsSettings.nonce
			}
		}).then(() => {
			setNotice(__('Settings saved!', 'fsdpe-events'));
			setTimeout(() => setNotice(''), 3000); // Remove notice after 3 seconds
		});
	};

	const DUOTONE_PALETTE = [
		{ colors: [ '#000000', '#ffffff' ], name: 'Black and white', slug: 'black-white' },
		{ colors: [ '#ffffff', '#000000' ], name: 'White and black', slug: 'white-black' },
		{ colors: [ '#3D12F9', '#FD2B4C' ], name: 'Blue and red', slug: 'blue-red' },
	];

	const COLOR_PALETTE = [
		{ color: '#000000', name: 'Black', slug: 'black' },
		{ color: '#ffffff', name: 'White', slug: 'white' },
	];


	return (
		<div className="fsdpe-events-settings">
			{ notice && <Notice status="success" isDismissible={ false }>{ notice }</Notice> }

			<Panel header="Events">
				<PanelBody title={ __( 'Settings', 'fsdpe-events' ) }>
					<PanelRow>
						<div>
							<h3>Slug events</h3>
							<label>{__('Additional custom slug events', 'fsdpe-events')}</label>
							<TextControl
								__nextHasNoMarginBottom
								value={cptSlug}
								onChange={(value) => setCptSlug(value)}
							/>
						</div>
					</PanelRow>
					<PanelRow>
						<div>
							<h3>Timezone</h3>
							Timezone you can change on the setting website <a href={ '/wp-admin/options-general.php' } title={ 'here' }>here</a>.
						</div>
					</PanelRow>
				</PanelBody>
				<PanelBody title={ __( 'Design', 'fsdpe-events' ) } initialOpen={ true }>
					<PanelRow>
						<div style={{position: 'relative', width: '50%'}}>
							<h3>{__('Colors', 'fsdpe-events')}</h3>
							<DuotonePicker
								duotonePalette={DUOTONE_PALETTE}
								colorPalette={COLOR_PALETTE}
								value={duotone}
								onChange={setDuotone}
								className="fsdpe-events-settings__duotone"
							/>
							<h3>{__('Border radius', 'fsdpe-events')}</h3>
							<ToggleControl
								__nextHasNoMarginBottom
								help={
									borderRadius
										? 'Has border radius.'
										: 'No border radius.'
								}
								checked={borderRadius}
								onChange={(newValue) => {
									setBorderRadius(newValue);
								}}
							/>
							<div className="fsdpe-calendar-wrapper__views__cards__card"
								 style={{
									 position: 'absolute',
									 left: '100%',
									 top: '0px',
									 width: '300px',
									 border: `1px solid ${cardBRColor}`,
									 padding: '10px',
									 borderRadius: `${cardRadius}px`,
									 boxShadow: 'rgba(0, 0, 0, 0.1) 0px 2px 4px',
									 display: 'none',
									 flexDirection: 'column'
								 }}>
								<h3>Title event</h3>
								<p>Description</p>
								<div className="chq-atc">
									<button type="button" className="chq-atc--button">
										<svg width="20px" height="20px" viewBox="0 0 1024 1024">
											<path
												d="M704 192v-64h-32v64h-320v-64h-32v64h-192v704h768v-704h-192z M864 864h-704v-480h704v480z M864 352h-704v-128h160v64h32v-64h320v64h32v-64h160v128z"></path>
										</svg>
										Add to calendar
									</button>
								</div>
								<button>Read more</button>
							</div>
						</div>
					</PanelRow>
				</PanelBody>
			</Panel>
			<div className="fsdpe-events-settings__bottom">
				<Button isPrimary onClick={saveSettings}>
					{__('Save Settings', 'fsdpe-events')}
				</Button>
				<div style={{display: 'flex', justifyContent: 'end', gap: '16px'}}>
					<span>By</span>
					<a href="https://www.56degrees.co.uk/" title="56 Degrees" target="_blank">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							xmlSpace="preserve"
							id="Layer_1"
							width={100}
							x={0}
							y={0}
							style={{
								enableBackground: "new 0 0 600.4 599.2",
							}}
							viewBox="62.4 245.5 484.1 113.5"
						>
							<style type="text/css">
								{`
									.st0{fill:#26272A;}
									.st1{fill:#FFFFFF;}
									.st2{fill:url(#SVGID_1_);}
								`}
							</style>
							<title>{"56 Degrees"}</title>
							<path
								d="M283.9 298.6c-.6-5.3-5.1-9.3-10.4-9.3-5.5-.1-10.3 3.8-11.3 9.3h21.7zm13.2 24.7c-5.5 6.1-13.4 9.6-21.7 9.5-15.8 0-27.6-10.9-27.6-27.4 0-14.7 10-27.5 25.7-27.5 14.6 0 24.9 12.3 24.9 27 0 1.3-.1 2.7-.3 4h-36.6c.7 7.2 6.9 12.7 14.2 12.5 5.1-.1 9.9-2.3 13.3-6.1l8.1 8zM341.4 297.4c-3.1-4.1-7.9-6.5-13-6.5-7.6.1-13.7 6.4-13.6 14v.4c-.3 7.6 5.6 14 13.2 14.3h.7c5 0 9.8-2.4 12.7-6.5v-15.7zm14.1 31.4c0 9.5-1.6 15.1-4.8 19.6-4.8 6.7-13.3 10.6-23.4 10.6-9.6.1-18.9-3.9-25.5-10.9l9.1-9.2c4.1 4.9 10.1 7.6 16.4 7.6 4 .3 8-1.3 10.8-4.2 2.2-2.4 3.3-5.7 3.3-12.4v-1.7c-4 3.2-9 4.9-14.2 4.8-7.6 0-14.9-3.2-20-8.9-4.3-5.2-6.7-11.7-6.6-18.5 0-15.6 11.5-27.5 25.9-27.5 5.6-.1 11.1 1.8 15.5 5.3v-4.2h13.6l-.1 49.6zM394.6 291.5c-1.7-.4-3.4-.6-5.1-.5-5.3.2-10.2 3-12.9 7.6v33.2h-14.2V279H376v5.3c3.9-4.3 9.5-6.6 15.3-6.4 1.6 0 3.2.2 4.8.5l-1.5 13.1zM432.6 298.6c-.6-5.3-5.1-9.3-10.4-9.3-5.5-.1-10.3 3.8-11.3 9.3h21.7zm13.2 24.7c-5.5 6.1-13.4 9.6-21.7 9.5-15.8 0-27.6-10.9-27.6-27.4 0-14.7 10-27.5 25.7-27.5 14.6 0 24.9 12.3 24.9 27 0 1.3-.1 2.7-.3 4h-36.6c.7 7.2 6.9 12.7 14.2 12.5 5.1-.1 9.9-2.3 13.3-6.1l8.1 8zM486.3 298.6c-.6-5.3-5.1-9.3-10.4-9.3-5.5-.1-10.3 3.8-11.3 9.3h21.7zm13.2 24.7c-5.5 6.1-13.4 9.6-21.7 9.5-15.8 0-27.6-10.9-27.6-27.4 0-14.7 10-27.5 25.7-27.5 14.6 0 24.9 12.3 24.9 27 0 1.3-.1 2.7-.3 4h-36.6c.7 7.2 6.9 12.7 14.2 12.5 5.1-.1 9.9-2.3 13.3-6.1l8.1 8zM511.2 315.6c4 3.4 9.2 5.3 14.5 5.2 3.8 0 6.7-1.9 6.7-4.5 0-8-25.5-5.1-25.5-22.1 0-10.1 9.8-16.4 20.3-16.4 6.3 0 12.5 1.9 17.8 5.3l-6.7 10.2c-2.9-2.2-6.4-3.5-10.1-3.6-3.9 0-7.2 1.5-7.2 4.2 0 6.8 25.5 4.1 25.5 22.4 0 10.1-9.9 16.3-21 16.3-7.6-.1-15.1-2.6-21.2-7.1l6.9-9.9zM231.6 262.7c-6.2-4.6-14.2-7.2-26.2-7.2h-11.7c4.1 2.7 5.1 8.2 2.4 12.2-2.7 4.1-8.2 5.1-12.2 2.4-1-.7-1.8-1.5-2.5-2.5v64h23.9c12.1 0 20-2.6 26.2-7.2 9.7-7.3 15.4-18.8 15.2-31 .2-11.9-5.5-23.3-15.1-30.7zm-5 47.5c-4.7 5.8-12 9-19.5 8.5h-11v-50.1H207c7.5-.5 14.7 2.7 19.5 8.5 3.7 4.7 5.7 10.6 5.7 16.6 0 5.9-1.9 11.8-5.6 16.5z"
								className="st0"
							/>
							<path d="M184.2 255.6h-2.8v2.8c.7-1.2 1.6-2.1 2.8-2.8z" className="st1"/>
							<linearGradient
								id="SVGID_1_"
								x1={72.919}
								x2={178.656}
								y1={670.937}
								y2={776.674}
								gradientTransform="matrix(1 0 0 -1 0 1004.642)"
								gradientUnits="userSpaceOnUse"
							>
								<stop
									offset={0}
									style={{
										stopColor: "#3d12f9",
									}}
								/>
								<stop
									offset={1}
									style={{
										stopColor: "#fd2b4c",
									}}
								/>
							</linearGradient>
							<path
								d="M188.9 245.5c-9.7 0-17.5 7.9-17.5 17.5 0 9.7 7.9 17.5 17.5 17.5s17.5-7.9 17.5-17.5c.1-9.7-7.8-17.5-17.5-17.5zm0 26.4c-4.9 0-8.9-4-8.9-8.9s4-8.9 8.9-8.9 8.9 4 8.9 8.9-4 8.9-8.9 8.9zm-75.3 34.8c0 15-12.7 26.3-28.1 26.3-8.7.1-17.1-3.5-23.1-9.8l10-9.3c3.3 3.7 8 5.9 13 6.1 3.4 0 6.6-1.2 9.1-3.5 2.7-2.5 4.3-6.1 4.2-9.8 0-3.9-1.7-7.7-4.7-10.3-2.6-2.1-5.8-3.2-9.1-3.1-4.1 0-8.1 1.5-11.3 4.1l-9.1-1.3 4.9-40.4h40.3v13H81.5l-1.2 12c1.9-.4 3.9-.6 5.9-.5 6.4-.2 12.7 1.8 17.7 5.7 6.2 5.2 9.8 12.8 9.7 20.8zm30.4-26.6h-1l14.3-24.3h-16.2l-18 30.2c-4 6.8-7.5 13.5-7.5 21 0 15.9 13.6 26 27.8 26 14.8 0 26.9-11.9 27.1-26.8.1-14.4-11.6-26.1-26-26.2 0 .1-.3.1-.5.1zm-.7 39.9c-7.3.1-13.3-5.7-13.5-13 .2-4.4 1.8-8.6 4.6-12.1 2.5-1.2 5.3-1.9 8.2-1.9 7.4-.1 13.4 5.7 13.6 13.1v.5c.3 7.1-5.3 13-12.4 13.3-.1.1-.3.1-.5.1z"
								className="st2"
							/>
						</svg>
					</a>
				</div>
			</div>
		</div>
	);
};

export {SettingsPage};