import {
	useState,
} from '@wordpress/element';
import {
	ToggleControl,
} from '@wordpress/components';

import { useControlSettingSet } from '../_hooks';

type Props = {
	controlSetting: any, // wp.customize.setting or wp.customize.settings[key]
	isActive: 0 | 1,
	title: string,
	description?: string,
}


export default function ApuraToggle({ controlSetting, isActive, title, description }: Props) {

	const [ active, setActive ] = useState<number|undefined>(isActive);

	useControlSettingSet({
		controlSetting,
		value: active
	});

	// サーバーサイド側では、booleanでなくNumber[1,0]で判断しているので注意！
	const handleOnChange = (state: boolean) => {
		setActive(Number(state));
	}

	return (
		<div className='apura-toggle-control'>
			<ToggleControl
				label={title}
				help={description}
				checked={ Boolean(active) }
				onChange={handleOnChange}
				__nextHasNoMarginBottom={true}
			/>
		</div>
	)
}