import { ValidatedTextControl } from 'jet-form-builder-actions';
import { WideLine } from 'jet-form-builder-components';
import { __ } from '@wordpress/i18n';

function BearerTokenControls( empty, {
	settings,
	onChangeSettingObj,
} ) {
	return <>
		<WideLine/>
		<ValidatedTextControl
			label={ __( 'Bearer token', 'jet-engine' ) }
			help={ __(
				'Set token for Bearer Authorization type',
				'jet-engine',
			) }
			value={ settings.bearer_token }
			onChange={ val => onChangeSettingObj( { bearer_token: val } ) }
			isErrorSupported={
				( { property } ) => 'bearer_token' === property
			}
			required
			__next40pxDefaultSize
			__nextHasNoMarginBottom
		/>
	</>;
}

export default BearerTokenControls;<cx-vui-repeater
	:button-label="'Add New'"
	:button-style="'accent'"
	:button-size="'default'"
	v-model="adminFilters"
	@input="onInput"
	@add-new-item="addNewField( $event, [], adminFilters )"
>
	<cx-vui-repeater-item
		v-for="( filter, index ) in adminFilters"
		:title="adminFilters[ index ].title"
		:subtitle="adminFilters[ index ].type"
		:collapsed="isCollapsed( filter )"
		:index="index"
		@clone-item="cloneField( $event, filter._id, adminFilters )"
		@delete-item="deleteField( $event, filter._id, adminFilters )"
		:key="filter._id"
		>
		<cx-vui-input
			label="Name/Placeholder"
			description="Current filter name. Can be used as placeholder for filter dropdown control (see option below)"
			:wrapper-css="[ 'equalwidth' ]"
			size="fullwidth"
			:value="adminFilters[ index ].title"
			@input="setFieldProp( filter._id, 'title', $event, adminFilters )"
		></cx-vui-input>
		<cx-vui-switcher
			label="Use Name as Placeholder"
			description="Use title as placeholder/reset option for the filter dropdown."
			:wrapper-css="[ 'equalwidth' ]"
			:value="adminFilters[ index ].title_as_placeholder"
			@input="setFieldProp( filter._id, 'title_as_placeholder', $event, adminFilters )"
		></cx-vui-switcher>
		<cx-vui-select
			label="Type"
			description="Select type of data to filter by - taxonomies or meta data"
			:wrapper-css="[ 'equalwidth' ]"
			size="fullwidth"
			:options-list="adminFiltersTypes"
			:value="adminFilters[ index ].type"
			@input="setFieldProp( filter._id, 'type', $event, adminFilters )"
		></cx-vui-select>
		<template
			v-if="'taxonomy' === filter.type && hasTaxonomies()"
		>
			<cx-vui-select
				label="Taxonomy"
				description="Select taxonomy to filter data by"
				:wrapper-css="[ 'equalwidth' ]"
				size="fullwidth"
				:options-list="taxonomiesList()"
				:value="adminFilters[ index ].tax"
				@input="setFieldProp( filter._id, 'tax', $event, adminFilters )"
			></cx-vui-select>
			<cx-vui-switcher
				v-if="isHierarchical( filter.tax )"
				label="Show Hierarchy"
				description="Show terms hierarchy with spaces."
				:wrapper-css="[ 'equalwidth' ]"
				:value="adminFilters[ index ].show_hierarchy"
				@input="setFieldProp( filter._id, 'show_hierarchy', $event, adminFilters )"
			></cx-vui-switcher>
			<cx-vui-switcher
				label="Show Counts"
				description="Show posts counts for taxonomy terms."
				:wrapper-css="[ 'equalwidth' ]"
				:value="adminFilters[ index ].show_count"
				@input="setFieldProp( filter._id, 'show_count', $event, adminFilters )"
			></cx-vui-switcher>
			<cx-vui-select
				label="Order By"
				description="Field to order terms by"
				:wrapper-css="[ 'equalwidth' ]"
				:options-list="[
					{
						value: 'name',
						label: 'Name',
					},
					{
						value: 'slug',
						label: 'Slug',
					},
					{
						value: 'term_group',
						label: 'Term group',
					},
					{
						value: 'term_id',
						label: 'Term ID',
					},
					{
						value: 'description',
						label: 'Description',
					},
					{
						value: 'parent',
						label: 'Parent',
					},
					{
						value: 'term_order',
						label: 'Term Order',
					},
					{
						value: 'count',
						label: 'By the number of objects associated with the term',
					},
				]"
				size="fullwidth"
				:value="adminFilters[ index ].tax_order_by"
				@input="setFieldProp( filter._id, 'tax_order_by', $event, adminFilters )"
			></cx-vui-select>
			<cx-vui-select
				label="Order"
				description="Designates the ascending or descending order of the `Order By` parameter"
				:wrapper-css="[ 'equalwidth' ]"
				:options-list="[
					{
						value: 'ASC',
						label: 'From lowest to highest values (1, 2, 3; a, b, c)',
					},
					{
						value: 'DESC',
						label: 'From highest to lowest values (3, 2, 1; c, b, a)',
					},
				]"
				size="fullwidth"
				:value="adminFilters[ index ].tax_order"
				@input="setFieldProp( filter._id, 'tax_order', $event, adminFilters )"
			></cx-vui-select>
		</template>
		<cx-vui-component-wrapper
			v-else-if="'taxonomy' === filter.type"
			label="Note!"
			description="You haven`t any taxonomies registered for this post type. <a href='https://emsproperty.lk/wp-admin/admin.php?page=jet-engine-cpt-tax&cpt_tax_action=add' target='_blank'>Please create some here and proceed</a>"
		></cx-vui-component-wrapper>
		<template
			v-if="'meta' === filter.type"
		>
			<cx-vui-select
				label="Meta Field"
				description="Select JetEngine meta field to filter posts by"
				:wrapper-css="[ 'equalwidth' ]"
				size="fullwidth"
				v-if="currentTypeFields.length"
				:options-list="currentTypeFields"
				:value="adminFilters[ index ].meta_key"
				@input="setFieldProp( filter._id, 'meta_key', $event, adminFilters )"
			></cx-vui-select>
			<cx-vui-input
				label="Custom Meta Field"
				description="Or enter custom meta field name manually. Note! This meta field overrides previous option if set."
				:wrapper-css="[ 'equalwidth' ]"
				size="fullwidth"
				:value="adminFilters[ index ].custom_meta_key"
				@input="setFieldProp( filter._id, 'custom_meta_key', $event, adminFilters )"
			></cx-vui-input>
			<cx-vui-select
				label="Options Source"
				description="Get options for the filter from selected source"
				:wrapper-css="[ 'equalwidth' ]"
				size="fullwidth"
				:options-list="optionsSources( filter )"
				:value="adminFilters[ index ].options_source"
				@input="setFieldProp( filter._id, 'options_source', $event, adminFilters )"
			></cx-vui-select>
			<cx-vui-select
				label="Glossary"
				description="Select exact glossary to get options from"
				v-if="'glossary' === filter.options_source"
				:wrapper-css="[ 'equalwidth' ]"
				size="fullwidth"
				:options-list="glossariesList"
				:value="adminFilters[ index ].glossary_id"
				@input="setFieldProp( filter._id, 'glossary_id', $event, adminFilters )"
			></cx-vui-select>
			<cx-vui-select
				label="Order"
				description="Designates the ascending or descending order"
				v-if="'db' === filter.options_source"
				:wrapper-css="[ 'equalwidth' ]"
				:options-list="[
					{
						value: '',
						label: 'Default',
					},
					{
						value: 'ASC',
						label: 'From lowest to highest values (1, 2, 3; a, b, c)',
					},
					{
						value: 'DESC',
						label: 'From highest to lowest values (3, 2, 1; c, b, a)',
					},
				]"
				size="fullwidth"
				:value="adminFilters[ index ].meta_order"
				@input="setFieldProp( filter._id, 'meta_order', $event, adminFilters )"
			></cx-vui-select>
		</template>
			</cx-vui-repeater-item>
</cx-vui-repeater>
No direct script access allowed