import React from "react";
import { format } from "date-fns";

import { LogActivityDTO } from "@griddo/api-types";

import { IModal } from "@ax/types";
import { Button, Modal } from "@ax/components";
import { eventKey } from "../constants";

import * as S from "./style";

const DetailModal = (props: IDetailModalProps) => {
	const { isOpen, toggleModal, restorePage, onClick, onKeyDown, itemLog } = props;

	const { id, created, eventType, user, contentType, content } = itemLog;

	const isDeleteEventWithRestore =
		eventType && eventType.internal_key ? Object.values(eventKey).includes(eventType.internal_key) : false;

	const isDeleteEvent = eventType?.internal_key ? eventType.internal_key.includes("DELETED") : false;

	const getButtonText = (type: string | undefined | null) => {
		if (!type) return "";

		switch (type) {
			case eventKey.DELETED_PAGE:
			case eventKey.DELETED_CONTENT_TYPE_PAGE:
				return "Restore page";
			case eventKey.DELETED_FOOTER:
				return "Restore footer";
			case eventKey.DELETED_HEADER:
				return "Restore header";
			case eventKey.DELETED_CATEGORY:
				return "Restore category";
			case eventKey.DELETED_CONTENT_TYPE:
				return "Restore content type";
			default:
				return "Restore";
		}
	};

	return (
		<Modal isOpen={isOpen} hide={toggleModal} title="Log detail" size="S" height={465}>
			<S.ModalContent>
				<S.ItemRow>
					<S.ItemTitle>Action ID</S.ItemTitle>
					<S.ItemContent>{id}</S.ItemContent>
				</S.ItemRow>
				<S.ItemRow>
					<S.ItemTitle>Event</S.ItemTitle>
					<S.ItemContent>
						<S.Event>
							<span>{eventType?.name || ""}</span>
							<S.EventContent
								onClick={!isDeleteEvent ? onClick : undefined}
								role="button"
								tabIndex={0}
								onKeyDown={!isDeleteEvent ? onKeyDown : undefined}
							>
								{content?.title || contentType?.title || ""}
							</S.EventContent>
						</S.Event>
					</S.ItemContent>
				</S.ItemRow>
				<S.ItemRow>
					<S.ItemTitle>Date</S.ItemTitle>
					<S.ItemContent>{`${format(new Date(created.date), "MMMM d, yyyy")} ${created.hour}`}</S.ItemContent>
				</S.ItemRow>
				<S.ItemRow>
					<S.ItemTitle>User</S.ItemTitle>
					<S.ItemContent>{user.name}</S.ItemContent>
				</S.ItemRow>
				<S.ItemRow>
					<S.ItemTitle>Email</S.ItemTitle>
					<S.ItemContent>{user.email}</S.ItemContent>
				</S.ItemRow>
				<S.ItemRow>
					<S.ItemTitle>Role</S.ItemTitle>
					<S.ItemContent>{user.role}</S.ItemContent>
				</S.ItemRow>
				<S.ItemRow>
					<S.ItemTitle>IP Address</S.ItemTitle>
					<S.ItemContent>{user.ip}</S.ItemContent>
				</S.ItemRow>
				{/*<S.ItemRow removeBorder={true}>
          <S.ItemTitle>Country</S.ItemTitle>
          <S.ItemContent>{user.country}</S.ItemContent>
        </S.ItemRow>*/}
				{eventType && isDeleteEventWithRestore && (
					<S.ActionWrapper>
						<Button type="button" buttonStyle="line" icon="back" onClick={restorePage}>
							{getButtonText(eventType.internal_key)}
						</Button>
					</S.ActionWrapper>
				)}
			</S.ModalContent>
		</Modal>
	);
};

interface IDetailModalProps extends IModal {
	itemLog: LogActivityDTO;
	restorePage(): void;
	onClick(e: React.MouseEvent<HTMLDivElement>): void;
	onKeyDown(): void;
}

export default DetailModal;
