import React, { useState } from "react";

import { IModal, ISchema } from "@ax/types";
import { EmptyState, Modal, SearchField, Select } from "@ax/components";
import { getFormTemplateCategories, getFormTemplateThumbnailProps } from "@ax/helpers";

import * as S from "./style";

const TemplateModal = (props: ITemplateModal): JSX.Element => {
	const {
		isOpen,
		toggleModal,
		mainModalAction,
		secondaryModalAction,
		templates,
		selectedTemplate,
		setSelectedTemplate,
	} = props;

	const init = Object.values(templates);
	const [items, setItems] = useState(init);
	const [selectValue, setSelectValue] = useState<string>();
	const [inputValue, setInputValue] = useState<string>("");

	const isFiltering = inputValue.length > 0 || !!selectValue;
	const templateCategories = getFormTemplateCategories();

	const filterTemplates = (query: string, filter: string | undefined) => {
		let filteredItems = init.filter((item) => item.displayName?.toLowerCase().includes(query.toLowerCase()));
		if (filter) {
			filteredItems = filteredItems.filter((item) => item.category === filter);
		}
		setItems(filteredItems);
	};

	const handleSearch = (query: string) => {
		setInputValue(query);
		filterTemplates(query, selectValue);
	};

	const handleChange = (value: string | undefined) => {
		setSelectValue(value);
		filterTemplates(inputValue, value);
	};

	const emptySearchStateProps = {
		icon: "search",
		title: "Oh! No Results Found",
		message: "We couldn’t find what you are looking for. Please, try another search.",
	};

	return (
		<Modal
			isOpen={isOpen}
			hide={toggleModal}
			title="New form: Select a template to start creating a new form"
			secondaryAction={secondaryModalAction}
			mainAction={mainModalAction}
			size="L"
		>
			<S.ModalContent>
				<S.FiltersBar>
					{templateCategories && templateCategories.length > 0 && (
						<S.SelectWrapper>
							<Select
								name="formTemplateSelect"
								value={selectValue}
								options={templateCategories}
								onChange={handleChange}
								placeholder="Form Type"
							/>
						</S.SelectWrapper>
					)}
					<SearchField
						value={inputValue}
						onChange={handleSearch}
						placeholder="Search"
						focus={false}
						searchOnEnter={false}
					/>
				</S.FiltersBar>
				{isFiltering && !items.length ? (
					<S.EmptyWrapper data-testid="empty-wrapper">
						<EmptyState {...emptySearchStateProps} />
					</S.EmptyWrapper>
				) : (
					<S.TemplateGrid>
						{items.map((template) => {
							const handleClick = () => setSelectedTemplate(template);
							const isSelected = template.component === selectedTemplate?.component;
							const thumbnailProps = getFormTemplateThumbnailProps(template.component);
							return (
								<S.TemplateItem key={template.component}>
									<S.Title>{template.displayName}</S.Title>
									<S.ThumbnailWrapper onClick={handleClick} isSelected={isSelected}>
										<S.Thumbnail {...thumbnailProps} />
									</S.ThumbnailWrapper>
								</S.TemplateItem>
							);
						})}
					</S.TemplateGrid>
				)}
			</S.ModalContent>
		</Modal>
	);
};

interface ITemplateModal extends IModal {
	templates: Record<string, ISchema>;
	selectedTemplate: ISchema | null;
	setSelectedTemplate: React.Dispatch<React.SetStateAction<ISchema | null>>;
}

export { TemplateModal };
