import {__, sprintf} from '@wordpress/i18n';
import './AssignmentSourceColumn.scss';
import EditableLinkedItem from './EditableLinkItem';
import TextInput from './TextInput';
import Checkbox from './Checkbox';

const SourceColumn = ( {adId, groups, activeContext, onContextChange, assignments, onAssignmentChange, onSearchChange, searchQuery} ) => {

	const isSingularActive = activeContext?.type === 'singular';

	return (
		<section className="adpresso-assignment__column adpresso-assignment__column--source">
			{/* Section: Ungrouped */}
			<div className="adpresso-assignment__section adpresso-assignment__section--ungrouped">
				<div className={`adpresso-card adpresso-card--context ${isSingularActive ? 'is-active' : ''}`}>
					<button
						type="button"
						className="adpresso-card__main-clickable"
						onClick={() => onContextChange( {type: 'singular', id: adId} )}
					>
						<span className="adpresso-card__title">{__( 'Singular ad', 'adpresso' )}</span>
						<span className="adpresso-card__meta">
					  		{sprintf( __( 'Assigned to %d placements', 'adpresso' ), assignments.placementIds.length )}
						</span>
					</button>
					<div className="adpresso-card__actions">
						<span className="adpresso-card__chevron dashicons dashicons-arrow-right-alt2" aria-hidden="true"/>
					</div>
				</div>
			</div>

			{/* Section: Groups */}
			<span>{__( 'Assign the selected item to an ad group', 'adpresso' )}</span>
			<div className="adpresso-assignment__section adpresso-assignment__section--groups">
				<div className="adpresso-assignment__section-header">
					<div className="adpresso-assignment__search">
						<TextInput
							placeholder={__( 'Search ad groups', 'adpresso' )}
							value={searchQuery}
							onChange={onSearchChange}
							className=""
						/>
					</div>
				</div>

				<div className="adpresso-assignment__section-body">
					<div className="adpresso-card-list adpresso-card-list--groups" role="list">
						{groups.length === 0 && (
							<p className="adpresso-empty-notice">
								{__( 'No groups found.', 'adpresso' )}
							</p>
						)}

						{groups.map( ( group ) => {
							const isGroupActive = activeContext?.type === 'group' && activeContext?.id === group.id;
							const isAssignedToGroup = assignments.groupIds.includes( group.id );

							return (
								<div
									key={group.id}
									className={`adpresso-card adpresso-card--group adpresso-card--context ${isGroupActive ? 'is-active' : ''}`}
									role="listitem"
									data-context-type="group"
									data-context-id={group.id}
								>
									<div className="adpresso-card__checkbox">
										<Checkbox
											checked={isAssignedToGroup}
											variantClass="adpresso-color-accent-invert"
											onChange={( isChecked ) => {
												const action = isChecked ? 'add_to_group' : 'remove_from_group';
												onAssignmentChange( {action, groupId: group.id} );
											}}
										/>
									</div>

									<span
										className="adpresso-card__type-image"
										aria-hidden="true"
										dangerouslySetInnerHTML={{__html: group.image}}
									/>

									<button
										type="button"
										className="adpresso-card__main-clickable"
										onClick={() => onContextChange( {type: 'group', id: group.id} )}
									>
										<span className="adpresso-card__title">{group.title}</span>
										<span className="adpresso-card__meta">
                  {sprintf( __( 'Assigned to %d placements', 'adpresso' ), group.placement_count || 0 )}
                </span>
										<div className="adpresso-card__notice" role="note">
											<span className="dashicons dashicons-info" aria-hidden="true"></span>
											<EditableLinkedItem
												label=""
												buttonText={__( 'Edit', 'adpresso' )}
												entityType="groups"
												entityId={group.id}
												element="link"
											/>
										</div>
									</button>

									<div className="adpresso-card__actions">
										<span className="adpresso-card__chevron dashicons dashicons-arrow-right-alt2" aria-hidden="true"/>
									</div>
								</div>
							);
						} )}
					</div>
				</div>

				<footer className="adpresso-assignment__section-footer">
					{/*<button type="button" className="adpresso-btn adpresso-color-primary adpresso-btn-action">*/}
					{/*	+ {__( 'Create ad group', 'adpresso' )}*/}
					{/*</button>*/}
				</footer>
			</div>
		</section>
	);
};

export default SourceColumn;