import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ClickableText, EllipsisText, GetSvgIcon, Loader, Tooltip, } from "../..";
import SearchTimer from "./SearchTimer";
import "./style.scss";
const SavedSearches = ({ titles, isLoading = false, onTitleClick = () => { }, onDeleteClick = () => { }, remainingTime = 0, showMore = false, handleMoreClick = () => { }, isDisabled = false, handleBack = () => { }, dataCy, }) => {
    const shouldShowTimer = (title) => (title.searchType === "nameGen" ||
        title.searchType === "external" ||
        title.searchType === "massUpdate") &&
        !title.isCompleted;
    const handleTitleClick = (title) => (_event) => {
        onTitleClick(title);
    };
    const handleDeleteClick = (title) => (_event) => {
        onDeleteClick(title);
    };
    return (_jsxs("div", { className: "savedSearches", children: [_jsxs("div", { children: [_jsxs("div", { children: [_jsx("button", { type: "button", onClick: handleBack, "data-cy": `${dataCy}-back-arrow`, children: _jsx(GetSvgIcon, { iconType: "chevronLeft", iconSize: "24" }) }), _jsx("h3", { children: "Saved Searches" })] }), _jsxs("div", { children: [titles.map((title, index) => (_jsxs("div", { children: [_jsxs("div", { children: [_jsxs("button", { type: "button", className: "btn-Title", onClick: handleTitleClick(title), "data-cy": `${dataCy}-select`, children: [title.searchType === "external" && (_jsx(Tooltip, { toolTipPosition: "bottom", content: "Search More", children: _jsx(GetSvgIcon, { iconType: "globeSearch", iconSize: "24" }) })), title.searchType === "massUpdate" && (_jsx(Tooltip, { toolTipPosition: "bottom", content: "Mass Update", children: _jsx(GetSvgIcon, { iconType: "refresh", iconSize: "24" }) })), title.searchType === "nameGen" && (_jsx(Tooltip, { toolTipPosition: "bottom", content: "Search Builder", children: _jsx(GetSvgIcon, { iconType: "sparkles", iconSize: "24" }) })), title.searchType !== "nameGen" &&
                                                        title.searchType !== "external" &&
                                                        title.searchType !== "massUpdate" && (_jsx(Tooltip, { toolTipPosition: "bottom", content: "Basic Search", children: _jsx(GetSvgIcon, { iconType: "search", iconSize: "24" }) })), _jsx(EllipsisText, { toolTipPosition: "bottom", maxWidth: `${shouldShowTimer(title) || title.isLoading ? 208 : 264}px`, children: title.name }), shouldShowTimer(title) && (_jsx(SearchTimer, { remainingTime: remainingTime ?? 0 }))] }), title.isLoading && _jsx(Loader, { width: "18", height: "18" })] }), _jsx("button", { type: "button", className: "btn-Delete", onClick: handleDeleteClick(title), "data-cy": `${dataCy}-delete`, children: _jsx(GetSvgIcon, { iconType: "delete", iconSize: "18" }) })] }, index))), isLoading && (_jsx("span", { className: "loader", children: _jsx(Loader, { width: "20", height: "20" }) })), _jsx("div", { className: "loadMore", children: showMore && (_jsx(ClickableText, { text: "Load More", colorVariant: "gray", onClick: handleMoreClick, disabled: isDisabled, sizeVariant: "sm", dataCy: `${dataCy}-load-more` })) })] })] }), _jsx("div", { className: "resultWrapper", children: _jsx(ClickableText, { text: "Back to results", colorVariant: "orange", onClick: handleBack, disabled: isDisabled, sizeVariant: "base", dataCy: `${dataCy}-back` }) })] }));
};
export default SavedSearches;
