/**
 * Site Kit by Google, Copyright 2022 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * WordPress dependencies
 */
import { useCallback } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { ENTER } from '@wordpress/keycodes';

/**
 * Internal dependencies
 */
import Data from 'googlesitekit-data';
import { CORE_SITE } from '../../../../googlesitekit/datastore/site/constants';
import { MODULES_THANK_WITH_GOOGLE } from '../../datastore/constants';
import Chip from '../../../../components/Chip';
const { useSelect, useDispatch } = Data;

export default function PostTypesSelect() {
	const postTypes = useSelect( ( select ) =>
		select( CORE_SITE ).getPostTypes()
	);

	const ctaPostTypes = useSelect( ( select ) =>
		select( MODULES_THANK_WITH_GOOGLE ).getCTAPostTypes()
	);

	const { setCTAPostTypes } = useDispatch( MODULES_THANK_WITH_GOOGLE );
	const toggleChip = useCallback(
		( { type, target, keyCode } ) => {
			if ( type === 'keyup' && keyCode !== ENTER ) {
				return;
			}

			const chip = target.closest( '.mdc-chip' );
			const chipID = chip?.dataset?.chipId; // eslint-disable-line sitekit/acronym-case
			if ( ! chipID ) {
				return;
			}

			if ( ctaPostTypes?.includes( chipID ) ) {
				setCTAPostTypes(
					ctaPostTypes.filter( ( postType ) => postType !== chipID )
				);
			} else {
				setCTAPostTypes( [ ...( ctaPostTypes || [] ), chipID ] );
			}
		},
		[ ctaPostTypes, setCTAPostTypes ]
	);

	const options = postTypes?.map( ( { slug, label } ) => (
		<Chip
			key={ slug }
			id={ slug }
			label={ label }
			onClick={ toggleChip }
			selected={ ctaPostTypes?.includes( slug ) }
		/>
	) );

	return (
		<div className="googlesitekit-twg-setting-field googlesitekit-twg-post-type-select">
			<h4>{ __( 'Post types', 'google-site-kit' ) }</h4>
			<p>
				{ __(
					'Display Thank with Google on these post types',
					'google-site-kit'
				) }
			</p>
			<div className="googlesitekit-twg-post-type-select__options">
				{ options }
			</div>
		</div>
	);
}

@@ -1716,16 +1716,218 @@
 %0A%09%09%09if (
+ chipID === 'all' ) %7B%0A%09%09%09%09if ( ctaPostTypes?.length === postTypes?.length ) %7B%0A%09%09%09%09%09setCTAPostTypes( %5B%5D );%0A%09%09%09%09%7D else %7B%0A%09%09%09%09%09setCTAPostTypes( postTypes.map( ( %7B slug %7D ) =%3E slug ) );%0A%09%09%09%09%7D%0A%09%09%09%7D else if (
  ctaPost
@@ -1952,24 +1952,24 @@
 hipID ) ) %7B%0A
-
 %09%09%09%09setCTAPo
@@ -2149,16 +2149,27 @@
 stTypes,
+ postTypes,
  setCTAP
@@ -2646,16 +2646,16 @@
 %09%09%09%3C/p%3E%0A
-
 %09%09%09%3Cdiv 
@@ -2711,16 +2711,182 @@
 tions%22%3E%0A
+%09%09%09%09%3CChip%0A%09%09%09%09%09id=%22all%22%0A%09%09%09%09%09label=%7B __( 'All', 'google-site-kit' ) %7D%0A%09%09%09%09%09onClick=%7B toggleChip %7D%0A%09%09%09%09%09selected=%7B ctaPostTypes?.length === postTypes?.length %7D%0A%09%09%09%09/%3E%0A
 %09%09%09%09%7B op

Add All option to TwG PostTypesSelect.