import { connect } from "react-redux";

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

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

import * as S from "./style";

const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
	const {
		site,
		setSiteInfo,
		setHistoryPush,
		deleteSite,
		publishSite,
		unpublishSite,
		isSelected,
		onCheck,
		getParams,
		hoverCheck,
	} = 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 handleOnChange = (value: ICheck) => onCheck(value);

	console.log(site, "site");

	return (
		<>
			<S.SiteItemRow key={site.id} role="rowgroup" selected={isSelected} data-testid="list-site-item">
				<S.CheckCell role="cell">
					<CheckField name="check" value={site.id} checked={isSelected || hoverCheck} onChange={handleOnChange} />
				</S.CheckCell>
				<S.ThumbailCell role="cell" onClick={setSite}>
					<ItemThumbnail width={64} height={48} src={site.thumbnail} />
				</S.ThumbailCell>
				<S.NameCell role="cell" onClick={setSite}>
					<S.Title>
						<ItemName name={site.name} length={40} />
					</S.Title>
				</S.NameCell>
				<S.UrlCell role="cell" onClick={setSite}>
					{site?.home ? site?.home.replace("//", "") : ""}
				</S.UrlCell>
				<S.LiveCell role="cell" onClick={setSite}>
					<Tooltip content={publishedTooltip[publishedState]}>
						{publishedState && <Icon name={publishedState} size="24" />}
					</Tooltip>
				</S.LiveCell>
				<S.TagCell role="cell" onClick={setSite}>
					{hidden && <Tag text="Hidden" type="square" icon="hide" />}
				</S.TagCell>
				<S.DateCell role="cell">
					{site?.lastAccess ? getFormattedDateWithTimezone(new Date(site?.lastAccess), "MMM d, Y") : ""}
				</S.DateCell>
				<S.ActionsCell role="cell">
					<S.StyledActionMenu icon="more" options={menuOptions} tooltip="Site actions" />
				</S.ActionsCell>
			</S.SiteItemRow>
			<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 IListSiteItemProps {
	site: ISite;
	isSelected: boolean;
	hoverCheck: boolean;
	setSiteInfo(currentSiteInfo: ISite): Promise<void>;
	setHistoryPush(site: 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>;
	onCheck: (e: ICheck) => 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)(ListSiteItem);
