import React, { useEffect, useState } from "react";
import { NETWORK_BASE_URL } from "../../constants/system.js";

export function BotNetwork() {

    const [linksTime, setLinksTime] = useState(['0 ms', '0 ms', '0 ms', '0 ms']);

    useEffect(() => {
        const waitingForTestingLink = [
            "https://kimi.moonshot.cn/",
            "https://github.com/",
            "https://youtube.com/",
            "https://www.google.com/"
        ]
        async function getNetwork() {
            for (const value of waitingForTestingLink) {
                const index = waitingForTestingLink.indexOf(value);
                const response = await fetch(NETWORK_BASE_URL + value);
                let tmp = linksTime;
                tmp[index] = `${ (await response.json()).time }ms`;
                setLinksTime(tmp);
            }
        }
        // 每隔10秒更新一次系统信息
        // const intervalId = setInterval(getNetwork, 10000);
        //
        // // 清除定时器，避免内存泄漏
        // return () => clearInterval(intervalId);
    }, []);

    return (
        <div className="card bg-base-100 shadow-xl">
            <div className="card-body">
                <h2 className="card-title">🐔网速</h2>
                <div className="flex flex-row pt-5 justify-between items-center">
                    <div className="flex flex-col items-center space-y-4">
                        <svg t="1731510966354" className="icon" viewBox="0 0 1075 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="4294" width="48" height="48">
                            <path
                                d="M1049.6 0m0 186.1632l0 651.6736q0 186.1632-186.1632 186.1632l-651.6736 0q-186.1632 0-186.1632-186.1632l0-651.6736q0-186.1632 186.1632-186.1632l651.6736 0q186.1632 0 186.1632 186.1632Z"
                                fill="#000000" p-id="4295"></path>
                            <path
                                d="M605.7984 459.9808c57.1392 1.28 104.1408 52.3264 104.1408 115.1488v232.5504a2.048 2.048 0 0 1-2.048 2.0992h-99.9936a2.048 2.048 0 0 1-2.048-2.048l-1.7408-294.0928c0-1.2288-2.2528-1.4848-2.6112-0.256-13.312 43.9296-52.736 56.32-99.84 56.32H329.984a2.048 2.048 0 0 0-2.048 2.048v235.9296a2.048 2.048 0 0 1-2.0992 2.0992H220.4672a2.048 2.048 0 0 1-2.048-2.048V241.5104a2.048 2.048 0 0 1 2.048-2.048h105.3696a2.048 2.048 0 0 1 2.048 2.048v216.32c0 1.1264 0.9728 2.048 2.0992 2.048h135.2192a2.048 2.048 0 0 0 1.8944-1.2288l96.9216-218.0096a2.048 2.048 0 0 1 1.8944-1.2288h116.7872c1.536 0 2.56 1.5872 1.8944 2.9696l-66.2528 142.2848c-19.7632 36.1984-34.304 61.8496-67.2768 72.8064-1.1776 0.3584-0.9216 2.4576 0.3584 2.4576h54.3744z"
                                fill="#FFFFFF" p-id="4296"></path>
                            <path
                                d="M752.9472 227.9936c-11.776 9.8304-19.456 25.9072-19.456 50.176 0 22.784 7.2704 40.448 18.1248 50.9952-5.632 9.3696-11.4176 15.9744-15.7696 19.456-0.7168 0.6144-0.2048 2.2528 0.7168 2.2016l64.512-4.6592c14.336-1.1264 26.624-6.5536 36.9664-15.7696 12.3904-10.496 19.456-28.5696 19.456-52.224 0-24.2688-7.0656-40.3456-19.456-50.176a64.7168 64.7168 0 0 0-43.008-14.7968c-16.384 0-30.3616 4.9664-42.0864 14.7968z"
                                fill="#007AFF" p-id="4297"></path>
                        </svg>
                        <span className="badge badge-neutral">{ linksTime[0] }</span>
                    </div>
                    <div className="flex flex-col items-center space-y-4">
                        <svg t="1731511025099" className="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="6382" width="48" height="48">
                            <path
                                d="M512 831.904c-19.168 0-38.304-9.92-58.144-29.76-7.808-7.808-7.808-20.48 0-28.288 7.808-7.808 20.48-7.808 28.288 0C494.336 786.08 504.128 792 512 792c7.872 0 17.664-5.92 29.856-18.144 7.808-7.808 20.48-7.808 28.288 0 7.808 7.808 7.808 20.48 0 28.288C550.304 821.984 531.168 831.904 512 831.904zM0 525.504C0 575.392 4.256 620.608 12.8 661.184 21.344 701.728 33.344 736.928 48.8 766.72 64.256 796.512 83.808 822.624 107.456 845.056 131.104 867.488 156.8 885.952 184.544 900.512 212.256 915.04 244 926.784 279.744 935.776 315.456 944.736 351.808 951.04 388.8 954.624 425.792 958.208 466.496 960 510.944 960 555.36 960 596.16 958.208 633.344 954.624 670.496 951.04 706.944 944.736 742.656 935.776 778.4 926.784 810.208 915.04 838.144 900.512 866.048 885.984 891.904 867.488 915.712 845.056 939.552 822.624 959.2 796.512 974.656 766.72 990.144 736.928 1002.208 701.728 1010.944 661.184 1019.648 620.608 1024 575.392 1024 525.504 1024 436.128 996.256 359.136 940.8 294.528 944 285.888 946.752 276.032 949.056 264.896 951.36 253.76 953.6 238.08 955.712 217.792 957.856 197.504 957.056 174.08 953.344 147.52 949.6 120.96 942.592 93.856 932.256 66.24L924.256 64.608C918.944 63.52 910.208 63.872 898.144 65.696 886.048 67.488 871.904 70.72 855.744 75.392 839.552 80.032 818.656 89.28 793.056 103.104 767.456 116.928 740.448 134.432 712 155.584 663.648 140.896 596.992 125.472 512 125.472 427.04 125.472 360.192 140.864 311.456 155.584 283.04 134.432 255.904 117.024 230.144 103.36 204.352 89.728 183.744 80.384 168.256 75.36 152.8 70.336 138.496 67.104 125.344 65.696 112.192 64.256 103.744 63.808 100 64.32 96.256 64.864 93.504 65.504 91.744 66.208 81.408 93.856 74.304 120.96 70.4 147.52 66.496 174.08 65.6 197.408 67.744 217.504 69.856 237.632 72.192 253.408 74.656 264.896 77.152 276.384 80 286.24 83.2 294.528 27.744 358.752 0 435.744 0 525.504ZM136.544 639.392C136.544 581.376 157.856 528.768 200.544 481.536 213.344 467.136 228.192 456.224 245.056 448.832 261.952 441.44 281.152 437.216 302.656 436.224 324.192 435.232 344.704 435.424 364.256 436.832 383.84 438.24 408 440.128 436.8 442.528 465.6 444.928 490.496 446.144 511.456 446.144 532.448 446.144 557.344 444.928 586.144 442.528 614.944 440.128 639.104 438.24 658.656 436.832 678.24 435.424 698.752 435.232 720.288 436.224 741.792 437.248 761.088 441.44 778.144 448.832 795.2 456.224 810.144 467.136 822.944 481.536 865.6 528.768 886.944 581.376 886.944 639.392 886.944 673.408 883.392 703.712 876.288 730.336 869.152 756.96 860.192 779.264 849.344 797.248 838.496 815.264 823.296 830.464 803.744 842.88 784.192 855.296 765.248 864.896 746.944 871.68 728.64 878.496 704.992 883.808 676 887.584 647.04 891.392 621.088 893.696 598.144 894.496 575.2 895.296 546.304 895.712 511.456 895.712 476.64 895.712 447.84 895.296 425.056 894.496 402.304 893.696 376.448 891.392 347.456 887.584 318.496 883.808 294.848 878.496 276.544 871.68 258.24 864.896 239.296 855.296 219.744 842.88 200.192 830.464 184.992 815.264 174.144 797.248 163.296 779.264 154.304 756.96 147.2 730.336 140.096 703.712 136.544 673.408 136.544 639.392ZM256 608A2 3 2520 1 0 384 608 2 3 2520 1 0 256 608zM640 608A2 3 2520 1 0 768 608 2 3 2520 1 0 640 608z"
                                fill="#000000" p-id="6383"></path>
                        </svg>
                        <span className="badge badge-ghost">{ linksTime[1] }</span>
                    </div>
                    <div className="flex flex-col items-center space-y-4">
                        <svg t="1731513083919" className="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="10881" width="48" height="48">
                            <path
                                d="M815.616 0H208.384C93.3 0 0 94.068 0 210.083v603.834C0 929.955 93.3 1024 208.384 1024h607.232C930.7 1024 1024 929.955 1024 813.917V210.083C1024 94.068 930.7 0 815.616 0z"
                                fill="#10A37F" p-id="10882"></path>
                            <path
                                d="M757.364 460.032A142.825 142.825 0 0 0 745.1 342.807a144.407 144.407 0 0 0-155.462-69.26 142.708 142.708 0 0 0-106.729-47.988h-1.257a144.384 144.384 0 0 0-137.355 99.933 142.755 142.755 0 0 0-95.418 69.237 144.43 144.43 0 0 0 17.757 169.262 142.825 142.825 0 0 0 12.241 117.202 144.384 144.384 0 0 0 155.462 69.26A142.755 142.755 0 0 0 541.09 798.44h1.28a144.337 144.337 0 0 0 137.356-100.003 142.732 142.732 0 0 0 95.418-69.237 144.198 144.198 0 0 0-17.78-169.192zM542.022 760.995h-0.163a107.148 107.148 0 0 1-68.562-24.855 69.857 69.857 0 0 0 3.375-1.932l114.06-65.862a18.548 18.548 0 0 0 9.379-16.128v-160.93l48.22 27.833a1.722 1.722 0 0 1 0.932 1.327v133.19a107.497 107.497 0 0 1-107.241 107.357z m-230.68-98.514a107.148 107.148 0 0 1-12.8-71.936l3.398 2.002 114.037 65.885a18.595 18.595 0 0 0 18.758 0l139.264-80.407v55.784a1.745 1.745 0 0 1-0.699 1.374l-115.293 66.56a107.567 107.567 0 0 1-107.334 0 107.497 107.497 0 0 1-39.33-39.285z m-29.998-249.018a106.985 106.985 0 0 1 55.878-47.08l-0.047 3.956v131.84a18.525 18.525 0 0 0 9.356 16.105l139.264 80.407-48.221 27.834a1.745 1.745 0 0 1-1.63 0.14l-115.316-66.63a107.497 107.497 0 0 1-39.284-146.595z m396.102 92.16l-139.24-80.384 48.197-27.834a1.722 1.722 0 0 1 1.629-0.163l115.316 66.583a107.427 107.427 0 0 1-16.593 193.746V521.704a18.525 18.525 0 0 0-9.31-16.057z m47.988-72.215a171.055 171.055 0 0 0-3.374-2.025L608 365.521a18.618 18.618 0 0 0-18.758 0l-139.24 80.384v-55.761c0-0.535 0.232-1.07 0.698-1.396l115.293-66.514a107.38 107.38 0 0 1 159.441 111.174z m-301.638 99.235l-48.22-27.834a1.699 1.699 0 0 1-0.932-1.327V370.316a107.38 107.38 0 0 1 176.059-82.456 97.135 97.135 0 0 0-3.375 1.932l-114.083 65.885a18.572 18.572 0 0 0-9.356 16.105v0.116l-0.093 160.745z m26.205-56.46L512 440.343l62.022 35.817v71.633L512 583.587l-62.022-35.794V476.16z"
                                fill="#FFFFFF" p-id="10883"></path>
                        </svg>
                        <span className="badge badge-ghost">{ linksTime[2] }</span>
                    </div>
                    <div className="flex flex-col items-center space-y-4">
                        <svg t="1731511054412" className="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="7446" width="48" height="48">
                            <path
                                d="M214.101333 512c0-32.512 5.546667-63.701333 15.36-92.928L57.173333 290.218667A491.861333 491.861333 0 0 0 4.693333 512c0 79.701333 18.858667 154.88 52.394667 221.610667l172.202667-129.066667A290.56 290.56 0 0 1 214.101333 512"
                                fill="#FBBC05" p-id="7447"></path>
                            <path
                                d="M516.693333 216.192c72.106667 0 137.258667 25.002667 188.458667 65.962667L854.101333 136.533333C763.349333 59.178667 646.997333 11.392 516.693333 11.392c-202.325333 0-376.234667 113.28-459.52 278.826667l172.373334 128.853333c39.68-118.016 152.832-202.88 287.146666-202.88"
                                fill="#EA4335" p-id="7448"></path>
                            <path
                                d="M516.693333 807.808c-134.357333 0-247.509333-84.864-287.232-202.88l-172.288 128.853333c83.242667 165.546667 257.152 278.826667 459.52 278.826667 124.842667 0 244.053333-43.392 333.568-124.757333l-163.584-123.818667c-46.122667 28.458667-104.234667 43.776-170.026666 43.776"
                                fill="#34A853" p-id="7449"></path>
                            <path
                                d="M1005.397333 512c0-29.568-4.693333-61.44-11.648-91.008H516.650667V614.4h274.602666c-13.696 65.962667-51.072 116.650667-104.533333 149.632l163.541333 123.818667c93.994667-85.418667 155.136-212.650667 155.136-375.850667"
                                fill="#4285F4" p-id="7450"></path>
                        </svg>
                        <span className="badge badge-ghost">{ linksTime[3] }</span>
                    </div>
                </div>
            </div>
        </div>
    );
}
