<?php
/**
 * Polls table view for Crowdsignal dashboard
 *
 * @package crowdsignal
 */

?>

<div class="cs-wrapper-row cs-background-fill">
	<div class="cs-dashboard__crowdsignal-header">
		<a href="https://crowdsignal.com" target="_blank" rel="noopener" class="cs-dashboard__crowdsignal-header-link">
			<h2 class="cs-dashboard__crowdsignal-header-brand">
				<img class="cs-dashboard__crowdsignal-header-logo" src="<?php echo esc_html( $resource_path ); ?>/img/svg/cs-logo2.svg" title="Crowdsignal" loading="lazy" width="40" alt="Crowdsignal Logo">
				<?php esc_html_e( 'Crowdsignal', 'polldaddy' ); ?>
			</h2>
		</a>
		<div class="cs-dashboard__crowdsignal-header-actions" id="dashboard-crowdsignal-header-actions"></div>
	</div>

	<div class='cs-dashboard__main'>
		<div id="cs-dashboard-notice" class="cs-dashboard__header-notice"></div>
		<div class="cs-dashboard__header">
			<div class="cs-dashboard__header-left">
				<div id="cs-dashboard-switch"></div>
			</div>
			<div class="cs-dashboard__header-right">
				<div id="cs-dashboard-create-menu"></div>
			</div>
		</div>

		<div class="item-container" id="dashboard-items">
			<table class="cs-dashboard__grid">
				<thead>
					<tr>
						<th class="cs-dashboard__grid is-name"><?php esc_html_e( 'Name', 'polldaddy' ); ?></th>
						<th class="cs-dashboard__grid is-type"><span class="cs-dashboard__mq-desktop-only"><?php esc_html_e( 'Type', 'polldaddy' ); ?></span></th>
						<th class="cs-dashboard__grid is-created"><span class="cs-dashboard__mq-desktop-only"><?php esc_html_e( 'Created', 'polldaddy' ); ?></span></th>
						<th class="cs-dashboard__grid is-status"><?php esc_html_e( 'Status', 'polldaddy' ); ?></th>
						<th class="cs-dashboard__grid is-responses-total"><?php esc_html_e( 'Responses', 'polldaddy' ); ?></th>
						<th class="cs-dashboard__grid is-source"><span class="cs-dashboard__mq-desktop-only"><?php esc_html_e( 'Source', 'polldaddy' ); ?></span></th>
						<th class="cs-dashboard__grid is-links"></th>
					</tr>
				</thead>
				<tbody>
					<?php
					if ( ! is_array( $items ) ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- output from page renderer
						$items = array();
					}
					foreach ( $items as $item ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
						$item->_id = intval( $item->_id );

						$delete_link  = false;
						$preview_link = false;
						$close_link   = false;
						$open_link    = false;
						$edit_link    = false;

						$item_post_link = isset( $item->_source_link ) ? $item->_source_link : '';

						$item_post_id = url_to_postid( $item_post_link );

						$display_link = wp_parse_url( $item_post_link );
						if ( isset( $display_link['query'] ) && '' !== $display_link['query'] ) {
							$display_link = $display_link['path'] . '?' . $display_link['query'];
						} elseif ( isset( $display_link['path'] ) && '' !== $display_link['path'] ) {
							$display_link = $display_link['path'];
						} else {
							$display_link = $item_post_link;
						}

						if ( 'poll' === $item->type ) {
							$item->name = trim( wp_strip_all_tags( $item->name ) );
							if ( 0 === strlen( $item->name ) ) {
								$item->name = __( 'Unknown', 'polldaddy' );
							}

							$results_link = 'https://app.crowdsignal.com/polls/' . $item->_id . '/results';
							if ( $item_post_link ) {
								$edit_link = get_edit_post_link( $item_post_id );
							} else {
								$edit_link   = add_query_arg(
									array(
										'action'  => 'edit',
										'poll'    => $item->_id,
										'message' => false,
									)
								);
								$delete_link = wp_nonce_url(
									add_query_arg(
										array(
											'action'  => 'delete',
											'poll'    => $item->_id,
											'message' => false,
										)
									),
									'delete-poll_' . $item->_id
								);
								$preview     = array( // phpcs:ignore -- for preview of polls
									'action'    => 'preview',
									'poll'      => $item->_id,
									'message'   => false,
									'iframe'    => 1,
									'TB_iframe' => 'true',
								);

								if ( isset( $_GET['iframe'] ) ) { // phpcs:ignore -- not actually processing a form
									$preview['popup'] = 1; // phpcs:ignore -- for preview of polls
								}
								$preview_link = add_query_arg( $preview );

								$close_link = wp_nonce_url(
									add_query_arg(
										array(
											'action'  => 'close',
											'poll'    => $item->_id,
											'message' => false,
										)
									),
									'close-poll_' . $item->_id
								);

								$open_link = wp_nonce_url(
									add_query_arg(
										array(
											'action'  => 'open',
											'poll'    => $item->_id,
											'message' => false,
										)
									),
									'open-poll_' . $item->_id
								);
							}
							$icon_url = 'img/svg/icon-block-poll-round.svg';
							switch ( $item->subtype ) {
								case 'applause':
									$icon_url = 'img/svg/icon-block-applause-round.svg';
									break;
								case 'vote':
									$icon_url = 'img/svg/icon-block-voting-round.svg';
									break;
							}
						} elseif ( 'survey' === $item->type ) {
							$results_link   = 'https://app.crowdsignal.com/surveys/' . $item->_id . '/report/overview';
							$icon_url       = 'img/svg/icon-block-survey-round.svg';
							$edit_post      = false;
							switch ( $item->subtype ) {
								case 'nps':
									$edit_link = $item_post_id ? get_edit_post_link( $item_post_id ) : false;
									$icon_url  = 'img/svg/icon-block-nps-round.svg';
									break;
								case 'feedback':
									$edit_link = $item_post_id ? get_edit_post_link( $item_post_id ) : false;
									$icon_url  = 'img/svg/icon-block-feedbackButton-round.svg';
									break;
							}
						} elseif ( 'quiz' === $item->type ) {
							$edit_post      = false;
							$item_post_link = false;
							$results_link   = 'https://app.crowdsignal.com/quizzes/' . $item->_id . '/report/overview';
							$edit_link      = 'https://app.crowdsignal.com/quizzes/' . $item->_id . '/question';
							$icon_url       = 'img/svg/icon-block-quiz-round.svg';
						} elseif ( 'rating' === $item->type ) {
							$edit_post      = false;
							$item_post_link = false;
							$results_link   = 'https://app.crowdsignal.com/ratings/' . $item->_id . '/results/';
							$edit_link      = 'https://app.crowdsignal.com/ratings/' . $item->_id . '/edit/';
							$icon_url       = 'img/svg/icon-block-rating-round.svg';
								} elseif ( 'project' === $item->type ) {
							$edit_post      = false;
							$item_post_link = false;
							$results_link   = 'https://app.crowdsignal.com/project/' . $item->_id . '/results/';
							$edit_link      = 'https://app.crowdsignal.com/project/' . $item->_id;
							$icon_url       = 'img/svg/icon-block-project-round.svg';
						} else { // show a generic icon and generic links to app.crowdsignal.com for unhandled item types
							$edit_post      = false;
							$item_post_link = false;
							$results_link   = false;
							$edit_link      = 'https://app.crowdsignal.com/dashboard/';
							$icon_url       = 'img/svg/cs-logo2.svg';
						}

						$icon_url = $resource_path . $icon_url; // phpcs:ignore -- variable comes from controller
						$type_descriptor = $item->subtype
							? $item->subtype
							: $item->type;

						?>
						<tr>
							<td class="cs-dashboard__grid is-name">
								<a target="_blank" rel="noopener" title="<?php echo esc_attr( $item->name ); ?>" href="<?php echo esc_url( $results_link ); ?>"><?php echo esc_html( $item->name ); ?></a>
							</td>
							<td class="cs-dashboard__grid is-type">
								<img class="cs-dashboard__mq-desktop-only" src="<?php echo esc_url( $icon_url ); ?>" title="<?php echo esc_attr( $type_descriptor ); ?>" alt="<?php echo esc_attr( $type_descriptor ); ?> icon" />
							</td>
							<td class="cs-dashboard__grid is-created">
								<span class="cs-dashboard__mq-desktop-only"><?php echo esc_html( gmdate( 'M j', $item->_created ) ); ?></span>
							</td>
							<td class="cs-dashboard__grid is-status" data-open="<?php echo $item->_closed ? 0 : 1; ?>">
							<?php echo ! $item->_closed ? esc_html__( 'Open', 'polldaddy' ) : esc_html__( 'Closed', 'polldaddy' ); ?>
							</td>
							<td class="cs-dashboard__grid is-responses-total">
							<strong><?php echo esc_html( number_format_i18n( $item->_responses ) ); ?></strong>
							</td>
							<td class="cs-dashboard__grid is-source">
								<?php if ( $item_post_link ) : ?>
									<span class="cs-dashboard__mq-desktop-only">
										<a rel="noopener" href="<?php echo esc_url( $item_post_link ); ?>"><?php echo esc_url( $display_link ); ?></a>
									</span>
								<?php endif; ?>
							</td>
							<td class="cs-dashboard__grid is-links">
								<span class="cs-dashboard__mq-desktop-only">
									<a target="_blank" rel="noopener" href="<?php echo esc_url( $results_link ); ?>"><?php esc_html_e( 'Results', 'polldaddy' ); ?></a>
									<?php if ( $edit_link ) { ?>
										<a target="<?php echo $item_post_id ? '' : '_blank'; ?>" rel="noopener" href="<?php echo esc_url( $edit_link ); ?>"><?php esc_html_e( 'Edit', 'polldaddy' ); ?></a>
									<?php } ?>
									<?php if ( $open_link || $close_link ) { ?>
										<a target="_blank" rel="noopener" href="<?php echo $item->_closed ? esc_url( $open_link ) : esc_url( $close_link ); ?>"><?php $item->_closed ? esc_html_e( 'Open', 'polldaddy' ) : esc_html_e( 'Close', 'polldaddy' ); ?></a>
									<?php } ?>

									<?php if ( $delete_link ) { ?>
										<a target="_blank" rel="noopener" class="delete-poll delete" href="<?php esc_url( $delete_link ); ?>"><?php esc_html_e( 'Delete', 'polldaddy' ); ?></a>
									<?php } ?>

									<?php if ( $preview_link ) { ?>
										<a class='thickbox' href="<?php echo esc_url( $preview_link ); ?>"><?php esc_html_e( 'Preview', 'polldaddy' ); ?></a>
									<?php } ?>
								</span>
								<span
									class="cs-dashboard__mq-mobile-only cs-dashboard__links-dropdown-toggle"
									data-link-id="<?php echo esc_attr( $item->_id ); ?>"
									data-status="<?php echo $item->_closed ? 'closed' : 'open'; ?>"
									data-results-url="<?php echo esc_attr( $results_link ); ?>"
									data-edit-url="<?php echo $edit_link ? esc_attr( $edit_link ) : ''; ?>"
									data-open-url="<?php echo $open_link ? esc_attr( $open_link ) : ''; ?>"
									data-close-url="<?php echo $close_link ? esc_attr( $close_link ) : ''; ?>"
									data-delete-url="<?php echo $delete_link ? esc_attr( $delete_link ) : ''; ?>"
									data-preview-url="<?php echo $preview_link ? esc_attr( $preview_link ) : ''; ?>"
									data-post-url="<?php echo $item_post_link ? esc_attr( $item_post_link ) : ''; ?>"
									>
								</span>
								<div id="cs-dashboard__links-dropdown-menu-<?php echo esc_attr( $item->_id ); ?>"></div>
							</td>
						</tr>
					<?php } ?>
				</tbody>
			</table>
		</div>
		<div class="tablenav" <?php echo ( '' === $page_links ) ? 'style="display:none;"' : ''; // phpcs:ignore -- output from paginate_links ?>>
			<div class="tablenav-pages"><?php echo $page_links; ?></div> <?php // phpcs:ignore -- output from paginate_links ?>
		</div>
	</div>

	<div class="cs-dashboard__footer">
		<div class="cs-dashboard__footer-left">
			<a href="https://crowdsignal.com" target="_blank" rel="noopener">
				<img class="cs-dashboard__crowdsignal-header-logo" src="<?php echo esc_html( $resource_path ); ?>/img/svg/cs-logo2.svg" title="Crowdsignal" loading="lazy" width="40" alt="Crowdsignal Logo" />
			</a>
			<br />
			What is Crowdsignal? <a href="https://crowdsignal.com" target="_blank" rel="noopener">Learn more here.</a>
		</div>
		<div class="cs-dashboard__footer-right">
			<a class="cs-dashboard__a8c-link" href="https://automattic.com" rel="noreferrer noopener" target="_blank">An <span>Automattic</span> Company</a>
		</div>
	</div>
</div>

<div id="cs-dashboard__modal-request"></div>

<script type="text/javascript">

jQuery( document ).ready(function(){
	const currentUserName = '<?php echo esc_js( $current_user_name ); // phpcs:ignore -- output from main handler file ?>';
	const currentView = '<?php echo esc_js( $view ); // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- output from page renderer ?>';
	const el = wp.element.createElement;
	const render = wp.element.render;
	const useState = wp.element.useState;
	const Fragment = wp.element.Fragment;
	const connectedAccountEmail = '<?php echo esc_js( $connected_account_email ); // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- output from page renderer ?>';
	const csFormsAccountEmail = '<?php echo esc_js( $cs_forms_account_email ); // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- output from page renderer ?>';
	const currentUserOwnsConnection = <?php echo ( $current_user_owns_connection ) ? 'true' : 'false'; // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- output from page renderer ?>;
	const imgPath = '<?php echo esc_url( $resource_path . 'img' ); // phpcs:ignore -- variable comes from controller ?>';
	const hasCrowdsignalBlocks = <?php echo $has_crowdsignal_blocks ? 'true' : 'false'; // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- output from page renderer ?>;
	const hasMultipleAccounts = <?php echo $has_multiple_accounts ? 'true' : 'false'; // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- output from page renderer ?>;
	const globalAccountName = '<?php echo esc_js( $global_user_name ); // phpcs:ignore -- variable comes from controller ?>';
	const globalAccountId = '<?php echo esc_js( $global_user_id ); // phpcs:ignore -- variable comes from controller ?>';

	plugin = new Plugin( {
		<?php /* translators: %s is the name of the rating being deleted */ ?>
		delete_rating: '<?php echo esc_js( __( 'Are you sure you want to delete the rating for "%s"?', 'polldaddy' ) ); ?>',
		<?php /* translators: %s is the name of the poll being deleted */ ?>
		delete_poll: '<?php echo esc_js( __( 'Are you sure you want to delete the poll %s?', 'polldaddy' ) ); ?>',
		delete_answer: '<?php echo esc_js( __( 'Are you sure you want to delete this answer?', 'polldaddy' ) ); ?>',
		delete_answer_title: '<?php echo esc_js( __( 'delete this answer', 'polldaddy' ) ); ?>',
		standard_styles: '<?php echo esc_js( __( 'Standard Styles', 'polldaddy' ) ); ?>',
		custom_styles: '<?php echo esc_js( __( 'Custom Styles', 'polldaddy' ) ); ?>'
	} );

	if ( 'me' !== currentView && ! currentUserOwnsConnection ) {
		const RestrictionModal = () => {
			const [ isModalOpen, setModalOpen ] = useState( false );
			const openModal = () => setModalOpen( true );
			const closeModal = () => setModalOpen( false );
			const linkClickHandler = ( e ) => {
				e.preventDefault();
				openModal();
				return false;
			}
			jQuery( '.is-name a' ).on( 'click', linkClickHandler );
			jQuery( '.is-results-action a' ).on( 'click', linkClickHandler );
			const shallNotPass = el( 'img', { src: `${imgPath}/svg/lock.svg` } );
			const modalContentHeadline = el( 'div', { className: 'cs-dashboard__modal-request-headline' }, 'You need access to this Crowdsignal page.' );
			const modalContentCta = el( 'div', { className: 'cs-dashboard__modal-request-text' }, 'Please ask the project owner' );
			const modalContentCtaEmail = el( 'div', { className: 'cs-dashboard__modal-request-text is-email' }, connectedAccountEmail );
			const modalContentCtaEnd = el( 'div', { className: 'cs-dashboard__modal-request-text' }, 'for access to a Team account.' );
			const modalContent = el(
				'div',
				{ className: 'cs-dashboard__modal-request-body' },
				shallNotPass,
				modalContentHeadline,
				modalContentCta,
				modalContentCtaEmail,
				modalContentCtaEnd
			);
			return el(
				Fragment,
				{},
				'',
				isModalOpen && el( wp.components.Modal, { className: 'cs-dashboard__modal-request', onRequestClose: closeModal, title: 'Request access', contentLabel: 'Request access' }, modalContent )
			);
		}

		render(
			el( RestrictionModal ),
			document.getElementById( 'cs-dashboard__modal-request' )
		);
	}

	const CreateAccountDropdown = () => {
		const toggle = ( { isOpen, onToggle } ) => el(
			wp.components.Button,
			{
				className: 'cs-account__dropdown-menu-toggle',
				onClick: onToggle,
				'aria-expanded': isOpen,
			},
			connectedAccountEmail || '<?php echo esc_js( __( 'Account', 'polldaddy' ) ); ?>',
			el( wp.components.Icon, { icon: 'arrow-down' }, null )
		);

		const openCsAccount = () => window.open( 'https://app.crowdsignal.com/account', '_blank' );
		const openCsSettings = () => window.open( '?page=polls&action=options', '_self' );
		const openCsBlog = () => window.open( 'https://crowdsignal.com/blog', '_blank' );
		const openCsSupport = () => window.open( 'https://crowdsignal.com/support', '_blank' );
		const openCsSite = () => window.open( 'https://crowdsignal.com/', '_blank' );
		const renderList = () => el(
			'div',
			{
				className: 'cs-account-menu__dropdown-list'
			},
			el( wp.components.Button, { isSecondary: true, onClick: openCsAccount }, '<?php echo esc_js( __( 'My Account', 'polldaddy' ) ); ?>' ),
			el( wp.components.Button, { isSecondary: true, onClick: openCsSettings }, '<?php echo esc_js( __( 'Settings', 'polldaddy' ) ); ?>' ),
			el( wp.components.Button, { isSecondary: true, onClick: openCsBlog }, '<?php echo esc_js( __( 'Crowdsignal Blog', 'polldaddy' ) ); ?>' ),
			el( wp.components.Button, { isSecondary: true, onClick: openCsSupport }, '<?php echo esc_js( __( 'Help', 'polldaddy' ) ); ?>' ),
			el( wp.components.Button, { isSecondary: true, onClick: openCsSite }, 'crowdsignal.com' ),
		);
		return el(
			wp.components.Dropdown,
			{
				className: 'cs-account-menu__dropdown',
				contentClassName: 'cs-account-menu__drowpdown-list-container',
				placement: 'bottom center',
				renderToggle: toggle,
				renderContent: renderList ,
				popoverProps: { noArrow: false },
			}
		);
	}

	render( el( CreateAccountDropdown, {} ), document.getElementById( 'dashboard-crowdsignal-header-actions' ) );

	// create new dropdown with modals:
	const ModalButton = ( { label, iconUrl, videoSrc, headline, footer } ) => {
		const videoPath = `${imgPath}/video/${videoSrc}`;
		const csImageUrlPath = 'https://app.crowdsignal.com/images/item-icons';
		const iconPath = `${csImageUrlPath}/${iconUrl}`;

		const [ isModalOpen, setModalOpen ] = useState( false );
		const openModal = () => setModalOpen( true );
		const closeModal = () => setModalOpen( false );

		const buttonIcon = el( 'img', { className: 'cs-create-menu__item-image-icon', src: iconPath, alt: label }, null );
		// const head = el( 'h2', {}, headline );
		// const head2 = el( 'h2', {}, 'This is how it works:' );
		const video = el( 'video', { className: 'cs-create-menu__video', src: `${videoPath}`, autoPlay: true, muted: true, loop: true }, null );
		return el( Fragment, {},
			el( wp.components.Button, { isSecondary: true, className: 'cs-create-menu__item', onClick: openModal }, buttonIcon, label ),
			isModalOpen && el( wp.components.Modal, { className: 'cs-create-menu__modal', contentLabel: `${label} video tutorial`, onRequestClose: closeModal, title: headline }, video, footer )
		);
	}

	const CreateMenuDropdown = () => {
		const toggle = ( { isOpen, onToggle } ) => el(
			wp.components.Button,
			{
				isPrimary: true,
				className: isOpen ? 'cs-create-menu__dropdown-toggle is-active' : 'cs-create-menu__dropdown-toggle',
				onClick: onToggle,
				'aria-expanded': isOpen
			},
			'Create new', el( wp.components.Icon, { icon: 'arrow-down-alt2' }, null )
		);

		const embedFooter = el( 'div', {}, 'Create a survey on: ', el( 'a', { href: 'https://app.crowdsignal.com' }, 'app.crowdsignal.com' ) );
		const sublistItems = [
			{ headline: 'Please find the Poll Block in your editor:', videoSrc: 'poll-block-tutorial.mp4', iconUrl: 'icon-block-poll-round.svg', label: 'Poll' },
			{ headline: 'How to embed a Crowdsignal Survey into WordPress:', videoSrc: 'survey-embed-tutorial.mp4', iconUrl: 'icon-block-survey-round.svg', label: 'Survey', footer: embedFooter },
			{ headline: 'Please find the Feedback Button Block in your editor:', videoSrc: 'feedback-button-block-tutorial.mp4', iconUrl: 'icon-block-feedbackButton-round.svg', label: 'Feedback' },
			{ headline: 'Please find the Measure NPS Block in your editor:', videoSrc: 'nps-block-tutorial.mp4', iconUrl: 'icon-block-nps-round.svg', label: 'NPS' },
			{ headline: 'Please find the Vote Block in your editor:', videoSrc: 'vote-block-tutorial.mp4', iconUrl: 'icon-block-voting-round.svg', label: 'Voting' },
			{ headline: 'Please find the Applause Block in your editor:', videoSrc: 'applause-block-tutorial.mp4', iconUrl: 'icon-block-applause-round.svg', label: 'Applause' },
		];
		const sublist = () => el(
			'div',
			{ className: 'cs-create-menu__dropdown-list' },
			sublistItems.map( item => el( ModalButton, item ) )
		);

		var dropdownProps = {
			className: 'cs-create-menu__dropdown',
			contentClassName: 'cs-create-menu__drowpdown-list-container',
			position: 'bottom center',
			renderToggle: toggle,
			renderContent: sublist,
			popoverProps: { noArrow: false },
		};

		return el( wp.components.Dropdown, dropdownProps, null );
	}

	render(
		el( CreateMenuDropdown, {} ),
		document.getElementById( 'cs-dashboard-create-menu' )
	);

	// notification
	const Notification = () => {
		const [ visible, setVisible ] = useState( true );
		const editorLink = el( 'a', { href: '<?php echo esc_url( add_query_arg( array( 'action' => 'create-poll' ) ) ); ?>' }, 'create poll page' );
		const csLink = el( 'a', { href: 'https://app.crowdsignal.com', target: '_blank' }, 'Crowdsignal dashboard' );
		const settingsLink = el( 'a', { href: 'options-general.php?page=polls&action=options' }, 'here' );
		const learnMoreLink = el( 'a', { href: 'https://crowdsignal.com/support/welcome-to-the-new-crowdsignal-area-in-wp-admin/', target: '_blank' }, 'Learn more.' );
		const noticeOptions = { onRemove: () => {
			window.localStorage.setItem( 'makingChangesNoticeClosed', true );
			setVisible( false );
		} };
		return visible && el(
			wp.components.Notice,
			noticeOptions,
			'We made some changes here. ', learnMoreLink
		);
	}

	const hasClosedNotice = window.localStorage.getItem( 'makingChangesNoticeClosed' );

	if ( ! hasClosedNotice ) {
		render(
			el( Notification ),
			document.getElementById( 'cs-dashboard-notice' )
		);
	} else {
		document.getElementById( 'cs-dashboard-notice' ) && document.getElementById( 'cs-dashboard-notice' ).remove();
	}


	// switch buttons
	const ButtonGroup = () => {
		const meAvatarUrl = '<?php echo esc_js( get_avatar_url( $user_id, array( 'size' => 16 ) ) ); // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- output from page renderer ?>';
		const meGravatar = el( 'img', { width: 16, src: meAvatarUrl, alt: 'User avatar', title: 'User avatar', className: 'cs-dashboard-switch__avatar' } );
		const [ isVisible, setVisible ] = useState( false );
		const hidePopover = () => setVisible( false );
		const showPopover = () => setVisible( true );
		let otherAvatarUrl = null;
		let otherGravatar = null;
		if ( hasMultipleAccounts && globalAccountId ) {
			otherAvatarUrl = '<?php echo esc_js( get_avatar_url( $global_user_id, array( 'size' => 16 ) ) ); // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- output from page renderer ?>';
			otherGravatar = el( 'img', { width: 16, src: otherAvatarUrl, alt: globalAccountName, title: globalAccountName, className: 'cs-dashboard-switch__avatar' } );
		}
		const meButton = el(
			wp.components.Button,
			{
				href: '?post_type=feedback&page=polls&view=me',
				isSecondary: true,
				className: 'me' === currentView && 'is-current',
			},
			el( 'span', { className: 'cs-dashboard-switch__text' }, 'Me', meGravatar )
		);
		const otherButton = hasMultipleAccounts
			? el(
				wp.components.Button,
				{
					href: '?post_type=feedback&page=polls&view=blog',
					isSecondary: true,
					className: 'blog' === currentView && 'is-current',
				},
				el( 'span', { className: 'cs-dashboard-switch__text' }, globalAccountName, otherGravatar )
			)
			: null;
		const csformsButton = hasCrowdsignalBlocks
			? el(
					Fragment,
					{},
					el(
						wp.components.Button,
						{
							href: '?post_type=feedback&page=polls&view=csforms',
							isSecondary: true,
							className: 'csforms' === currentView && 'is-current',
							onMouseOver: showPopover,
							onMouseOut: hidePopover,
						},
						'On This Site'
					),
					isVisible && el(
						wp.components.Popover,
						{ noArrow: false, position: 'middle right', className: 'cs-dashboard-switch__popover' },
						'This WordPress site is connected',
						el( 'br' ),
						'to Crowdsignal account:',
						el( 'br' ),
						csFormsAccountEmail
					)
				)
			: null;
		return ( hasMultipleAccounts || hasCrowdsignalBlocks ) && el( wp.components.ButtonGroup, { className: 'cs-dashboard-switch' }, meButton, otherButton, csformsButton );
	}
	const buttonGroupContainer = document.getElementById( 'cs-dashboard-switch' );
	if ( buttonGroupContainer ) {
		render(
			el( ButtonGroup ),
			buttonGroupContainer
		);
	}

	// Links dropdown (mobile view)
	const linksDropdownToggle = ( { isOpen, onToggle } ) => el(
		wp.components.Button,
		{
			isPrimary: false,
			className: isOpen ? 'cs-links-menu__dropdown-toggle is-active' : 'cs-links-menu__dropdown-toggle',
			onClick: onToggle,
			'aria-expanded': isOpen
		},
		el( wp.components.Icon, { icon: 'ellipsis' }, null )
	);

	const linkToggles = document.body.querySelectorAll( 'span.cs-dashboard__links-dropdown-toggle' );
	linkToggles.forEach( linkToggle => {
		const {
			postUrl,
			linkId,
			resultsUrl,
			openUrl,
			closeUrl,
			status
		} = linkToggle.dataset;
		const links = [];
		postUrl && links.push( el( 'a', { rel: 'noopener noreferer', key: Math.random(), href: postUrl }, 'View Post' ) );
		resultsUrl && links.push( el( 'a', { rel: 'noopener noreferer', key: Math.random(), href: resultsUrl }, 'Results' ) );
		status === 'closed' && openUrl && links.push( el( 'a', { rel: 'noopener noreferer', key: Math.random(), href: openUrl }, 'Open' ) );
		status === 'open' && closeUrl && links.push( el( 'a', { rel: 'noopener noreferer', key: Math.random(), href: closeUrl }, 'Close' ) );

		const sublist = () => el(
			'div',
			{ className: 'cs-links-menu__dropdown-list' },
			links.map( link => link )
		);
		const linkDropdown = document.getElementById( 'cs-dashboard__links-dropdown-menu-' + linkId );
		if ( linkDropdown ) {
			render(
				el( wp.components.Dropdown, {
					className: 'cs-dashboard__links-dropdown',
					contentClassName: 'cs-dashboard__links-drowpdown-container',
					position: 'bottom left',
					renderToggle: linksDropdownToggle,
					renderContent: sublist,
					popoverProps: { noArrow: false },
				} ),
				linkDropdown
			);
		}
	} );
});
</script>
