import { NavLink, Outlet, useLocation } from "react-router-dom"
import { Flex } from '@wordpress/components';
import { OptionsContext } from "./options/context/GlobalState";
import { useState } from "@wordpress/element";
import axios from 'axios';
import { __, _x, _n } from '@wordpress/i18n'
import { Notice } from "@wordpress/components";

const ThemeOptions = () => {

	const location = useLocation();
	const url = `${devia_options.rest_url}devia/v1/settings`;
	const [saveSetting, setSaveSetting] = useState('Save Settings');
	const [saveState, setSaveState] = useState(false);
	const [demoSetting, setDemoSetting] = useState(devia_options.theme_options)

	const fields = JSON.parse( devia_options.theme_options.fields ) ? JSON.parse( devia_options.theme_options.fields ) : []

	const handleSubmit = (e) => {
		e.preventDefault();

		setSaveSetting("saving ...")
		axios.post(url,
			demoSetting
			, {
				headers: {
					'content-type': 'application/json',
					'X-WP-NONCE': devia_options.nonce,
				}
			}
		)
			.then((res) => {
				setSaveSetting("Save Settings")
				setSaveState(true)
				setTimeout(() => {
					setSaveState(false)
				}, 10000);
			})
	}
	const handleReset = (e) => {
		e.preventDefault();

		axios.get(url, {
			headers: {
				'content-type': 'application/json',
				'X-WP-NONCE': devia_options.nonce,
			}
		})
			.then((res) => {
				//console.log( res.data )
				let dataArray = res.data
				const resetOptions = { ...devia_options, "theme_options": dataArray }
				setDemoSetting(resetOptions.theme_options)
				console.log("demoSetting", demoSetting)
			})
	}

	return <section className="theme-options">

		<div className="theme-options__sidebar" style={{ background: '#48b1ff17', padding: '90px 0 0 70px', flex: '0 0 250px' }}>
			<div className="theme-options__sidebar__wrapper">
				<div className="panel-logo">
					<h2>{__('Theme Options', devia_options.text_domain)}</h2>
					<span>{ devia_options.version }</span>
				</div>
				<ul className="options-tabs" style={{ display: 'flex', gap: 15 + 'px', flexDirection: 'column' }}>
					{ fields.map( subPage => {
						if( subPage.fields.length ) {
							return <li>
								<NavLink
									className={ state => state.isActive ? 'active' : '' }
									to={`/theme-options/${'general' != subPage.group ? subPage.group : ''}`}
									end={'general' == subPage.group} >
										{__(`${subPage.label} Settings`, devia_options.text_domain)}
								</NavLink>
							</li>
						}
					}) }
				</ul>
			</div>
		</div>

		<form onSubmit={(e) => handleSubmit(e)} className="theme-options__form">
			{saveState && <Notice status="success">Options Saved.</Notice>}

			<Flex className={"devia-modal-inner theme-options__save-controls"} gap="3">
				<p className="submit">
					<button type="submit" className="button button-primary">{__(saveSetting, devia_options.text_domain)}</button>
				</p>
				<p className="reset">
					<button onClick={handleReset} className="button button-secondary" >{__('Reset', devia_options.text_domain)}</button>
				</p>
			</Flex>

			<div className="options-content">
				<OptionsContext>
					<Outlet context={[demoSetting, setDemoSetting]} />
				</OptionsContext>
			</div>

		</form>


	</section>
}
export default ThemeOptions;