import { useState } from "react";

import { FieldsBehavior, Modal } from "@ax/components";
import type { IModal } from "@ax/types";

import * as S from "./style";

const AddKeywordsModal = (props: IAddKeywordsModal) => {
	const { isOpen, toggleModal, addNewKeyword } = props;

	const [value, setValue] = useState<string[]>([]);

	const handleChange = (newValue: string[]) => setValue(newValue);

	const handleClick = () => {
		addNewKeyword(value);
		setValue([]);
		toggleModal();
	};

	const handleClose = () => {
		isOpen && toggleModal();
		setValue([]);
	};

	const mainModalAction = {
		title: "Create keyword",
		onClick: handleClick,
		disabled: !value.length,
	};

	const secondaryModalAction = { title: "Cancel", onClick: handleClose };

	return (
		<Modal
			isOpen={isOpen}
			hide={handleClose}
			title="New keyword"
			secondaryAction={secondaryModalAction}
			mainAction={mainModalAction}
			size="S"
			height={288}
		>
			<S.ModalContent>
				<FieldsBehavior
					fieldType="TagsField"
					name="keywords"
					title="Keywords"
					value={value}
					onChange={handleChange}
					placeholder="Type a keyword..."
					helptext="Type a tag and press enter to create it"
				/>
			</S.ModalContent>
		</Modal>
	);
};

interface IAddKeywordsModal extends IModal {
	addNewKeyword: (value: string[]) => void;
}

const DeleteKeywordsModal = (props: IDeleteKeywordsModal) => {
	const { isOpen, toggleModal, deleteKeyword } = props;

	const mainModalAction = {
		title: "Delete keyword",
		onClick: deleteKeyword,
	};

	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };

	return (
		<Modal
			isOpen={isOpen}
			hide={toggleModal}
			title="Delete keyword"
			secondaryAction={secondaryModalAction}
			mainAction={mainModalAction}
			size="S"
			height={240}
		>
			<S.ModalContent>
				You are about to <strong>delete a keyword that is currently in use.</strong>
				<br />
				Please make sure you want to delete it.
			</S.ModalContent>
		</Modal>
	);
};

interface IDeleteKeywordsModal extends IModal {
	deleteKeyword: () => void;
}

export { AddKeywordsModal, DeleteKeywordsModal };
