/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
 */

import {Button} from '@wordpress/components';
import {FloTextControl, FloToggleControl} from 'components';
import './style.scss';

export function CustomCategoriesView(props) {
	const {attributes, setAttributes} = props;
	const {customItems = []} = attributes;

	const customList = (value) => {
		return value
			.sort((a, b) => a.index - b.index)
			.map((infoItem, index) => {
				return (
					<div key={index} className="flo-category-switcher-editor__item">
						<div className="flo-category-switcher-editor__item-remove">
							<Button
								onClick={() => {
									const newInfo = customItems
										.filter((item) => item.index !== infoItem.index)
										.map((i) => {
											if (i.index > infoItem.index) {
												i.index -= 1;
											}
											return i;
										});
									setAttributes({customItems: newInfo});
								}}
							>
								<i className="gbp-icon-delete_1"></i>
							</Button>
						</div>

						<div className="flo-category-switcher-editor__item-title">
							Item {infoItem.index + 1}
						</div>
						<div className="flo-category-switcher-editor__item-content">
							<FloTextControl
								className="cs-item-title"
								placeholder="Item Title"
								value={infoItem.title}
								onChange={(title) => {
									const newObject = Object.assign({}, infoItem, {
										title: title,
									});
									setAttributes({
										customItems: [
											...customItems.filter(
												(item) => item.index !== infoItem.index
											),
											newObject,
										],
									});
								}}
							/>
							<FloTextControl
								className="cs-item-url"
								placeholder="Item Link"
								value={infoItem.url}
								onChange={(url) => {
									const newObject = Object.assign({}, infoItem, {
										url: url,
									});
									setAttributes({
										customItems: [
											...customItems.filter(
												(item) => item.index !== infoItem.index
											),
											newObject,
										],
									});
								}}
							/>
							<FloToggleControl
								label={'Open in New Tab'}
								checked={infoItem.targetUrl}
								onChange={() => {
									const newObject = Object.assign({}, infoItem, {
										targetUrl: !infoItem.targetUrl,
									});
									setAttributes({
										customItems: [
											...customItems.filter(
												(item) => item.index !== infoItem.index
											),
											newObject,
										],
									});
								}}
							/>
						</div>
					</div>
				);
			});
	};

	return (
		<div className="flo-category-switcher-editor">
			<div className="flo-category-switcher-editor__items">
				{customList(customItems)}
			</div>
			<div className="flo-category-switcher-editor__add">
				<Button
					onClick={() => {
						setAttributes({
							customItems: [
								...customItems,
								{
									index: customItems.length,
									title: '',
									url: '',
									targetUrl: '',
								},
							],
						});
					}}
				>
					Add Item <i className="gbp-icon-add-small"></i>
				</Button>
			</div>
		</div>
	);
}
