import React, { memo } from "react";

import { FieldsBehavior } from "@ax/components";
import { ILinkField, IUrlField } from "@ax/types";
import { getNullValue } from "@ax/helpers";

const LinkField = (props: ILinkFieldProps): JSX.Element => {
	const { value, onChange, disabled, whiteList, goTo, theme, actions, selectedContent, objKey } = props;

	const defaultValues = {
		text: "",
		linkType: "url",
		url: null,
		modal: {},
	};

	const safeValue = value ? value : defaultValues;
	const handleTextChange = (newValue: string) => onChange({ ...safeValue, text: newValue });
	const handleLinkTypeChange = (newValue: string) => {
		let newObjValue: ILinkField = { ...safeValue, linkType: newValue };

		if (newValue === "url") {
			newObjValue = { ...newObjValue, modal: getNullValue(newObjValue.modal, true) };
		}

		if (newValue === "modal") {
			newObjValue = { ...newObjValue, url: null };
		}

		onChange(newObjValue);
	};
	const handleUrlChange = (newValue: IUrlField) => onChange({ ...safeValue, url: newValue });
	const handleModalChange = (newValue: any) => onChange({ ...safeValue, modal: newValue });

	const modalFieldSchema = {
		title: "Modal",
		type: "ComponentContainer",
		hideable: true,
		mandatory: true,
		key: "modal",
		condition: "modal",
		whiteList,
	};

	const urlFieldSchema = {
		title: "URL",
		type: "UrlField",
		key: "url",
		advanced: true,
		condition: "url",
	};

	return (
		<>
			<FieldsBehavior
				title="Text"
				name="text"
				fieldType="TextField"
				value={safeValue.text}
				onChange={handleTextChange}
				disabled={disabled}
			/>
			<FieldsBehavior
				title="Type of link"
				name="linkType"
				fieldType="ConditionalField"
				value={safeValue.linkType}
				onChange={handleLinkTypeChange}
				disabled={disabled}
				options={[
					{
						value: "url",
						title: "Link to Page",
						name: "url",
					},
					{
						value: "modal",
						title: "Open Modal",
						name: "modal",
					},
				]}
				innerFields={[
					<FieldsBehavior
						key="modal"
						title="Modal"
						name="modal"
						fieldType="ComponentContainer"
						value={safeValue.modal}
						onChange={handleModalChange}
						disabled={disabled}
						whiteList={whiteList}
						selectedContent={selectedContent}
						parentKey={objKey}
						objKey="modal"
						goTo={goTo}
						theme={theme}
						actions={actions}
						mandatory
						condition="modal"
						field={modalFieldSchema}
					/>,
					<FieldsBehavior
						key="url"
						title="URL"
						name="url"
						fieldType="UrlField"
						value={safeValue.url}
						onChange={handleUrlChange}
						disabled={disabled}
						mandatory
						condition="url"
						field={urlFieldSchema}
						advanced
					/>,
				]}
			/>
		</>
	);
};

interface ILinkFieldProps {
	value: ILinkField | null;
	onChange: (value: ILinkField | null) => void;
	disabled?: boolean;
	whiteList: string[];
	actions: any;
	theme: string;
	goTo: (editorID: number) => void;
	selectedContent: any;
	objKey: string;
}

export default memo(LinkField);
