import { useState } from "react";

import { FloatingButton, NoteField, SearchField } from "@ax/components";
import { getDisplayName } from "@ax/helpers";
import type { ISchemaField } from "@ax/types";

import SectionOption from "./SectionOption";
import SideModalOption from "./SideModalOption";

import * as S from "./style";

const SideModal = (props: ISideModalProps): JSX.Element | null => {
	const { onClick, theme, fieldArrays, selectedField, selectField } = props;

	const isMultiArray = fieldArrays.length > 1;

	const [isOpen, setIsOpen] = useState(true);
	const [searchQuery, setSearchQuery] = useState("");

	const handleClick = (option: string) => onClick(option);

	const handleSectionClick = (option: ISchemaField) => selectField(option);
	const handleBackClick = () => selectField(null);

	const toggleOpen = () => {
		setSearchQuery("");
		setIsOpen((state) => !state);
	};

	const filteredOptions =
		selectedField?.whiteList?.map((option: string) => {
			const displayName = getDisplayName(option);
			if (searchQuery.length > 0) {
				const name = displayName.toLowerCase();
				const search = searchQuery.toLocaleLowerCase();
				if (!name.includes(search)) return null;
			}
			return (
				<SideModalOption option={option} handleClick={handleClick} key={option} theme={theme}>
					{displayName}
				</SideModalOption>
			);
		}) || null;

	const sectionOptions = fieldArrays.map((option) => (
		<SectionOption option={option} handleClick={handleSectionClick} key={option.key} />
	));

	const noteText = {
		text: (
			<>
				Select <strong>which section</strong> you want to add the fields to.
			</>
		),
	};

	return (
		<>
			<S.Wrapper isOpen={isOpen} data-testid="side-modal" className="form-fields">
				{isMultiArray && !selectedField ? (
					<>
						<S.Header>
							<NoteField value={noteText} />
						</S.Header>
						<S.ColumnsWrapper>
							<S.FloatingButtonWrapper>
								{isOpen && <FloatingButton icon="leftArrow" size="S" onClick={toggleOpen} />}
							</S.FloatingButtonWrapper>
							<S.Content>{sectionOptions}</S.Content>
						</S.ColumnsWrapper>
					</>
				) : (
					<S.ModalContent>
						<S.Header>
							{isMultiArray && selectedField && (
								<S.BreadCrumb>
									<S.BreadCrumbItem isLastItem={false} onClick={handleBackClick}>
										Back
									</S.BreadCrumbItem>
									/<S.BreadCrumbItem isLastItem={true}>{selectedField.title}</S.BreadCrumbItem>
								</S.BreadCrumb>
							)}
							<S.SearchWrapper>
								<SearchField
									onChange={setSearchQuery}
									value={searchQuery}
									closeOnInactive={false}
									small={true}
									placeholder="Search field"
									focus={false}
								/>
							</S.SearchWrapper>
						</S.Header>
						<S.ColumnsWrapper>
							<S.FloatingButtonWrapper>
								{isOpen && <FloatingButton icon="leftArrow" size="S" onClick={toggleOpen} />}
							</S.FloatingButtonWrapper>
							<S.Content>{filteredOptions}</S.Content>
						</S.ColumnsWrapper>
					</S.ModalContent>
				)}
			</S.Wrapper>
			<S.ClosedWrapper isOpen={!isOpen}>
				<S.ClosedFloatingButtonWrapper>
					{!isOpen && <FloatingButton text="fields" icon="rightArrow" size="S" onClick={toggleOpen} />}
				</S.ClosedFloatingButtonWrapper>
			</S.ClosedWrapper>
		</>
	);
};

export interface ISideModalProps {
	onClick: (option: string) => void;
	theme: string;
	fieldArrays: ISchemaField[];
	selectedField: ISchemaField | null;
	selectField: (field: ISchemaField | null) => void;
}

export default SideModal;
