/**
 * WordPress dependencies
 */
import { __ } from "@wordpress/i18n";
import { addFilter } from "@wordpress/hooks";
import { useState } from "@wordpress/element";
import { Flex, FlexItem, Button, Tooltip, Icon, PanelBody, ToggleControl, TextControl } from "@wordpress/components";
import { help } from '@wordpress/icons';

/**
 * Internal dependencies
 */
import { isEmpty } from "../utils/index";

/**
 * Checks for Access Controls as part of required PersonalizeWP logic.
 *
 * @param {Object} attributes All original PWP attributes
 * @return {Object} settings The updated array of attributes.
 */
const checkRequiredAccessControls = ( required, attributes ) => {
	if ( Object.hasOwn( attributes, 'password' ) && '' !== attributes.password ) {
		return true;
	}
	// Return original
	return required;
}
addFilter(
	'personalizeWP.hasRequiredFields',
	'personalizewp/check-for-accessed-controls',
	checkRequiredAccessControls
);

/**
 * Personalized Access Control - Password Component
 *
 * @param {Object} props component property
 * props: {
 * 			password: string, - password value
 * 			onChange: function - function to trigger when there's a change on value
 * 		}
 *
 * @return {string} element component
 *
 */
const PasswordAccessControl = ({ password, onChange }) => {
	const TYPE = {
		Password: "password",
		Text: "text",
	};
	const ATTRIBUTE_KEY = "password";
	/** States **/
	const [enabled, setEnabled] = useState(password && password !== "" ? true : false);
	const [passwordType, setPasswordType] = useState(TYPE.Password);

	return (
		<>
			<div className="pwp-panel password">
				<Flex direction="row" align="flex-start">
					<FlexItem>
						<h3>{ __( 'Password', 'personalizewp' ) }</h3>
					</FlexItem>
					<FlexItem>
						<Tooltip
							delay={ 200 }
							text={ __( 'The selected block will require a password to access content.', 'personalizewp' ) }
							className="pwp-tooltip"
							placement="bottom-end">
							<div>
								<Icon icon={ help } size={ 20 } />
							</div>
						</Tooltip>
					</FlexItem>
				</Flex>
				<ToggleControl
					checked={enabled}
					label={ __( 'Enable', 'personalizewp' ) }
                    className='pwp-toggle'
					onChange={(enable) => {
						setEnabled(enable);

						// set the attribute to default/empty if disabled
						if (!enable) {
							onChange(ATTRIBUTE_KEY, "");
						}
					}}
				/>

				{enabled && (
					<div className="password" key={"pwp-password"}>
						<TextControl
							value={password}
							label={ __( 'Password', 'personalizewp' ) }
							type={passwordType}
							autoComplete="off"
							onChange={(val) => {
								onChange(ATTRIBUTE_KEY, val);
							}}
						/>
						<Button
							variant="link"
							onClick={() => {
								setPasswordType(
									passwordType === TYPE.Password
										? TYPE.Text
										: TYPE.Password,
								);
							}}
						>
							{passwordType === TYPE.Password
								? __( 'Show password', 'personalizewp' )
								: __( 'Hide password', 'personalizewp' )}
						</Button>
					</div>
				)}
			</div>
		</>
	);
};

/**
 * Render the Access Controls inspector control panel.
 *
 * @since 2.6.0
 * @param {Object} props All the props passed to this function
 */
export default function AccessControlPanel( props ) {
	/** States **/
	const {
		blockAtts,
		setPersonalizeWPAtts
	} = props;

	const { password } = blockAtts;

	/** Functions **/
	const updateAttribute = (key, value) => {
		setPersonalizeWPAtts({
			[key]: value,
		});
	};

	return (
		<PanelBody
			title={ __( 'Block Access Controls', 'personalizewp' ) }
			initialOpen={ ! isEmpty(password) }
			>
			<PasswordAccessControl
				password={ password ?? '' }
				onChange={updateAttribute}
			/>
		</PanelBody>
	);
}
