/**
 * WordPress dependencies
 */
import { CheckboxControl } from '@safe-wordpress/components';
import { useSelect, useDispatch } from '@safe-wordpress/data';
import { _x } from '@safe-wordpress/i18n';

/**
 * Internal dependencies
 */
import { useIsDisabled } from '../hooks';
import { store as NC_POST_EDITOR } from '../store';

export const StickyOption = (): JSX.Element => {
	const [ isSticky, setSticky ] = useSticky();
	const disabled = useIsDisabled();

	return (
		<CheckboxControl
			checked={ isSticky }
			label={ _x( 'Make this post sticky', 'command', 'nelio-content' ) }
			onChange={ ( status ) => setSticky( status ) }
			disabled={ disabled }
		/>
	);
};

// =====
// HOOKS
// =====

const useSticky = () => {
	const isSticky = useSelect(
		( select ) => select( NC_POST_EDITOR ).isSticky(),
		[]
	);
	const { setSticky } = useDispatch( NC_POST_EDITOR );
	return [ isSticky, setSticky ] as const;
};