import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { ClickableText, GetSvgIcon } from "..";
import "./style.scss";
function ExternalSearchDropdown({ searchTime, onCompleteSearch, }) {
    const [open, setOpen] = useState(false);
    const [searchNo, setSearchNo] = useState(0);
    const [timeLeft, setTimeLeft] = useState(searchTime);
    useEffect(() => {
        const timer = setInterval(() => {
            setTimeLeft((prevTime) => {
                if (prevTime === 1) {
                    clearInterval(timer);
                }
                return prevTime > 0 ? prevTime - 1 : prevTime;
            });
        }, 1000);
        return () => clearInterval(timer); // Cleanup the timer when the component unmounts
    }, []);
    //   useEffect(() => {
    //     const startTime = Date.now();
    //     const timeInterval = 3000;
    //     const totalSteps = 150;
    //     const stepsPerUpdate = totalSteps / ((searchTime * 1000) / timeInterval);
    //     const timer = setInterval(() => {
    //       const currentTime = Date.now();
    //       const elapsedTime = currentTime - startTime;
    //       const currentStep =
    //         Math.floor(elapsedTime / timeInterval) * stepsPerUpdate;
    //       if (currentStep >= totalSteps) {
    //         setSearchNo(totalSteps);
    //         clearInterval(timer);
    //       } else {
    //         setSearchNo(Math.floor(currentStep) + 1);
    //       }
    //     }, timeInterval);
    //     return () => clearInterval(timer); // Cleanup the timer when the component unmounts
    //   }, []);
    useEffect(() => {
        const totalSteps = 150;
        const timeInterval = 3000;
        const stepsPerUpdate = totalSteps / ((searchTime * 1000) / timeInterval);
        let currentStep = 0;
        const timer = setInterval(() => {
            currentStep += stepsPerUpdate;
            if (currentStep >= totalSteps) {
                setSearchNo(totalSteps);
                clearInterval(timer);
            }
            else {
                setSearchNo(Math.floor(currentStep) + 1);
            }
        }, timeInterval);
        return () => clearInterval(timer); // Cleanup the timer when the component unmounts
    }, []);
    useEffect(() => {
        if (timeLeft === 0) {
            onCompleteSearch();
            //   console.log("dispatch apply filters");
        }
    }, [timeLeft]);
    const formatTime = (seconds) => {
        const minutes = Math.floor(seconds / 60);
        const remainingSeconds = seconds % 60;
        return `0${minutes}:${remainingSeconds < 10 ? "0" : ""}${remainingSeconds}`;
    };
    return (_jsxs("div", { className: "ExternalSearchDropdown", children: [_jsx("div", { className: "countDown", children: formatTime(timeLeft) }), _jsxs("div", { className: "topMessage", children: [_jsx("p", { className: "messageTitle", children: "Forming Search Terms" }), _jsx(ClickableText, { showIcon: true, iconOnLeft: false, iconSize: "20", iconType: open ? "cheveronUp" : "cheveronDown", sizeVariant: "xs", colorVariant: "orange", text: "Collapse", onClick: () => {
                            setOpen(!open);
                        } })] }), open && (_jsxs("div", { className: "options", children: [_jsxs("div", { children: [_jsx(GetSvgIcon, { iconType: "search", iconSize: "20" }), _jsx("p", { children: "Forming Search Terms" })] }), _jsxs("div", { children: [_jsx(GetSvgIcon, { iconType: "seo", iconSize: "20" }), _jsx("p", { children: `Running Searches ${searchNo} of 150` })] }), _jsxs("div", { children: [_jsx(GetSvgIcon, { iconType: "abstractCircle", iconSize: "20" }), " ", _jsx("p", { children: "Extracting results" })] }), _jsxs("div", { children: [_jsx(GetSvgIcon, { iconType: "checkList", iconSize: "20" }), _jsx("p", { children: "Evaluating Profiles" })] }), _jsxs("div", { children: [_jsx(GetSvgIcon, { iconType: "penEdit", iconSize: "20" }), "/", _jsx("p", { children: "Describing results" })] })] }))] }));
}
export default ExternalSearchDropdown;
