import {useTranslation} from "react-i18next";
import {
    faDragon,
    faExclamationCircle,
    faHdd,
    faMap,
    faMicrochip,
    faPowerOff,
    faTachometerAlt,
    faUser
} from "@fortawesome/free-solid-svg-icons";
import React from "react";
import {TableRow} from "./TableRow";
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
import {faEye, faQuestionCircle} from "@fortawesome/free-regular-svg-icons";
import AsNumbersTable from "./AsNumbersTable";
import {ChartLoader} from "../navigation/Loader";

const PerformanceAsNumbersTable = ({data, servers}) => {
    const {t} = useTranslation();
    if (!data) return <ChartLoader/>;

    const dataIncludesGameServers = servers && Boolean(servers.filter(server => !server.proxy).length);
    const noTPSOnProxies = !servers || dataIncludesGameServers
        ? ''
        : <Fa icon={faQuestionCircle}
              title={t('html.description.performanceNoGameServers')}/>;

    return (
        <AsNumbersTable
            headers={[t('html.label.last30days'), t('html.label.last7days'), t('html.label.last24hours')]}
        >
            <TableRow icon={faExclamationCircle} color="red" text={t('html.label.lowTpsSpikes')}
                      values={[
                          data.low_tps_spikes_30d,
                          data.low_tps_spikes_7d,
                          data.low_tps_spikes_24h
                      ]}/>
            <TableRow icon={faPowerOff} color="red"
                      text={t(data.avg_server_downtime_30d ? 'html.label.serverDowntime' : 'html.label.totalServerDowntime') + ' (' + t('generic.noData') + ')'}
                      values={[
                          data.server_downtime_30d,
                          data.server_downtime_7d,
                          data.server_downtime_24h
                      ]}/>
            <TableRow icon={faPowerOff} color="red"
                      text={t('html.label.averageServerDowntime')}
                      values={[
                          data.avg_server_downtime_30d,
                          data.avg_server_downtime_7d,
                          data.avg_server_downtime_24h
                      ]}/>
            <TableRow icon={faUser} color="light-blue" text={t('html.label.averagePlayers')}
                      values={[
                          data.players_30d,
                          data.players_7d,
                          data.players_24h
                      ]}/>
            <TableRow icon={faTachometerAlt} color="orange" text={t('html.label.averageTps')}
                      values={[
                          <>{t(data.tps_30d)} {noTPSOnProxies}</>,
                          <>{t(data.tps_7d)} {noTPSOnProxies}</>,
                          <>{t(data.tps_24h)} {noTPSOnProxies}</>
                      ]}/>
            <TableRow icon={faTachometerAlt} color="amber" text={t('html.label.averageCpuUsage')}
                      values={[
                          data.cpu_30d,
                          data.cpu_7d,
                          data.cpu_24h
                      ]}/>
            <TableRow icon={faMicrochip} color="light-green" text={t('html.label.averageRamUsage')}
                      values={[
                          data.ram_30d,
                          data.ram_7d,
                          data.ram_24h
                      ]}/>
            <TableRow icon={faDragon} color="purple" text={t('html.label.averageEntities')}
                      values={[
                          <>{t(data.entities_30d)} {noTPSOnProxies}</>,
                          <>{t(data.entities_7d)} {noTPSOnProxies}</>,
                          <>{t(data.entities_24h)} {noTPSOnProxies}</>
                      ]}/>
            <TableRow icon={faMap} color="blue-grey"
                      text={<>{t('html.label.averageChunks')}{' '}{data.chunks_30d === 'plugin.generic.unavailable' ?
                          <Fa icon={faEye} title={t('html.description.noSpongeChunks')}/> : ''}</>}
                      values={[
                          <>{t(data.chunks_30d)} {noTPSOnProxies}</>,
                          <>{t(data.chunks_7d)} {noTPSOnProxies}</>,
                          <>{t(data.chunks_24h)} {noTPSOnProxies}</>
                      ]}/>
            <TableRow icon={faHdd} color="green"
                      text={t('html.label.maxFreeDisk')}
                      values={[
                          data.max_disk_30d,
                          data.max_disk_7d,
                          data.max_disk_24h
                      ]}/>
            <TableRow icon={faHdd} color="green"
                      text={t('html.label.minFreeDisk')}
                      values={[
                          data.min_disk_30d,
                          data.min_disk_7d,
                          data.min_disk_24h
                      ]}/>
        </AsNumbersTable>
    )
}

export default PerformanceAsNumbersTable;