import { connect } from "react-redux";

import { FieldsBehavior, Icon, Modal, Tag, Tooltip } from "@ax/components";
import { appActions } from "@ax/containers/App";
import { sitesActions } from "@ax/containers/Sites";
import { isDevelopment } from "@ax/helpers";
import type { IGetSitesParams, ISite } from "@ax/types";

import { ItemName, ItemThumbnail } from "./../../atoms";
import { useSiteActions } from "./../../hooks";

import * as S from "./style";

const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
	const { site, setSiteInfo, setHistoryPush, deleteSite, publishSite, unpublishSite, getParams } = props;
	const { hidden } = site;

	const {
		publishedState,
		publishedTooltip,
		setSite,
		menuOptions,
		inputValue,
		setInputValue,
		isOpenDelete,
		toggleDeleteModal,
		mainDeleteAction,
		secondaryDeleteAction,
		isOpenPublish,
		togglePublishModal,
		publishModal,
	} = useSiteActions({ site, setSiteInfo, setHistoryPush, deleteSite, publishSite, unpublishSite, getParams });

	const { title, mainAction, secondaryAction, content } = publishModal;

	const siteTooltip = isDevelopment() && `Site id: ${site.id}`;

	return (
		<>
			<S.SiteWrapper key={site.id} onClick={setSite} data-testid="grid-site-item">
				<S.ImageContainer>
					<Tooltip content={siteTooltip}>
						<ItemThumbnail src={site.thumbnail} height={199} />
					</Tooltip>
				</S.ImageContainer>
				<S.Wrapper>
					<S.Title>
						<ItemName name={site.name} length={40} />
					</S.Title>
					<S.IconsWrapper>
						<Tooltip content={publishedTooltip[publishedState]}>
							<Icon name={publishedState} size="24" />
						</Tooltip>
						<S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />
					</S.IconsWrapper>
				</S.Wrapper>
				{hidden && (
					<S.TagWrapper>
						<Tag text="Hidden" type="square" icon="hide" />
					</S.TagWrapper>
				)}
			</S.SiteWrapper>
			<Modal
				isOpen={isOpenDelete}
				hide={toggleDeleteModal}
				title="Delete Site?"
				secondaryAction={secondaryDeleteAction}
				mainAction={mainDeleteAction}
				height="auto"
			>
				{isOpenDelete ? (
					<S.ModalContent data-testid="delete-modal">
						<p>
							Are you sure you want to delete <strong>'{site.name}'</strong> site?
							<br />
							This action <strong>cannot be undone</strong>.
						</p>
						<p>
							Please type <strong>{site.name.toUpperCase()}</strong> to confirm
						</p>
						<FieldsBehavior fieldType="TextField" placeholder="Type here" value={inputValue} onChange={setInputValue} />
					</S.ModalContent>
				) : null}
			</Modal>
			<Modal
				isOpen={isOpenPublish}
				hide={togglePublishModal}
				title={title}
				secondaryAction={secondaryAction}
				mainAction={mainAction}
				height="auto"
			>
				{isOpenPublish ? <S.ModalContent data-testid="publish-modal">{content}</S.ModalContent> : null}
			</Modal>
		</>
	);
};

interface IGridSiteItemProps {
	site: ISite;
	setSiteInfo(currentSiteInfo: ISite): Promise<void>;
	setHistoryPush(page: string, isEditor: boolean): void;
	deleteSite(siteID: number, params?: IGetSitesParams): Promise<void>;
	publishSite(siteID: number, params?: IGetSitesParams): Promise<void>;
	unpublishSite(siteID: number, params?: IGetSitesParams): Promise<void>;
	getParams: () => IGetSitesParams;
}

const mapDispatchToProps = {
	setHistoryPush: appActions.setHistoryPush,
	setSiteInfo: sitesActions.setSiteInfo,
	deleteSite: sitesActions.deleteSite,
	publishSite: sitesActions.publishSite,
	unpublishSite: sitesActions.unpublishSite,
};

export default connect(null, mapDispatchToProps)(GridSiteItem);
