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

/**
 * External dependencies
 */
import clsx from 'clsx';
import { store as NC_DATA } from '@nelio-content/data';

/**
 * Internal dependencies
 */
import './style.scss';
import { useActiveProfile, useBufferSettingsInProfile } from '../../hooks';
import { Uuid } from '@nelio-content/types';

export type BufferSettingsProps = {
	readonly disabled: boolean;
};

export const BufferSettings = ( {
	disabled,
}: BufferSettingsProps ): JSX.Element | null => {
	const activeProfileId = useActiveProfile();
	const profile = useSelect(
		( select ) =>
			select( NC_DATA ).getSocialProfile( activeProfileId as Uuid ),
		[ activeProfileId ]
	);
	const [ bufferSettings, setBufferSettings ] =
		useBufferSettingsInProfile( activeProfileId );

	if ( ! activeProfileId || ! profile || ! profile.isBuffer ) {
		return null;
	}

	return (
		<div
			className={ clsx( {
				'nelio-content-social-message-editor__webhook-settings-control':
					true,
			} ) }
		>
			<CheckboxControl
				label={ _x(
					'Manage this message in Buffer',
					'command',
					'nelio-content'
				) }
				disabled={ disabled }
				checked={ bufferSettings?.isManagedInBuffer }
				onChange={ ( value ) =>
					setBufferSettings( {
						...bufferSettings,
						isManagedInBuffer: value,
					} )
				}
			/>
		</div>
	);
};