import {Affix, Button, Divider, Grid, Text, rem, Stack} from "@mantine/core";
import { AreaChart } from '@mantine/charts';
import type {PerformanceGetListData} from "~/utils/models.ts";
import React from "react";


export default function ({data, gridSpan, hideServerDeserialize, hideServerSerialize}: {
    data: PerformanceGetListData[], gridSpan: number, hideServerDeserialize: boolean, hideServerSerialize: boolean
}) {
    const chartData = data.map(item => ({
        RequestCount: item.request_count,
        gRpcClientPing: item.grpc.client_networking_ping,
        gRpcClientCPU: item.grpc.client_request_cpu,
        gRpcTimeTotal: item.grpc.client_request_time,
        gRpcRequestSize: item.grpc.networking_size.request_size,
        gRpcResponseSize: item.grpc.networking_size.response_size,
        gRpcServerDeserializeCPU: item.grpc.server_deserialize_cpu,
        gRpcServerDeserializeTime: item.grpc.server_deserialize_time,
        gRpcServerSerializeCPU: item.grpc.server_serialize_cpu,
        gRpcServerSerializeTime: item.grpc.server_serialize_time,
        gRpcServerProtocolTotalTime: item.grpc.server_protocol_total_time,

        RestClientPing: item.rest.client_networking_ping,
        RestClientCPU: item.rest.client_request_cpu,
        RestTimeTotal: item.rest.client_request_time,
        RestRequestSize: item.rest.networking_size.request_size,
        RestResponseSize: item.rest.networking_size.response_size,
        RestServerDeserializeCPU: item.rest.server_deserialize_cpu,
        RestServerDeserializeTime: item.rest.server_deserialize_time,
        RestServerSerializeCPU: item.rest.server_serialize_cpu,
        RestServerSerializeTime: item.rest.server_serialize_time,
        RestServerProtocolTotalTime: item.rest.server_protocol_total_time,
    }));

    return (
        <Grid gutter="xs" grow>
            <Grid.Col span={gridSpan} mb="md">
                <Text mb="md" pl="md" ta="center" fw={700}>Client CPU Usage</Text>
                <AreaChart
                    h={300}
                    data={chartData}
                    dataKey="RequestCount"
                    type="stacked"
                    xAxisLabel="Data Count"
                    yAxisLabel="CPU Usage (%)"
                    withLegend
                    withPointLabels={false}
                    withDots={false}
                    valueFormatter={(value) => new Intl.NumberFormat('en-US').format(value)}
                    areaChartProps={{ syncId: 'RequestCount' }}
                    series={[
                        { name: 'gRpcClientCPU', label: 'gRPC', color: 'teal.6' },
                        { name: 'RestClientCPU', label: 'Rest', color: 'indigo.6' },
                    ]}
                />
                <Divider my="0px" labelPosition="center" />
            </Grid.Col>

            <Grid.Col span={gridSpan} mb="md">
                <Text mb="md" pl="md" ta="center" fw={700}>Client Total Time (s)</Text>
                <AreaChart
                    h={300}
                    data={chartData}
                    dataKey="RequestCount"
                    type="stacked"
                    xAxisLabel="Data Count"
                    yAxisLabel="Total Time (s)"
                    withLegend
                    withPointLabels={false}
                    withDots={false}
                    valueFormatter={(value) => new Intl.NumberFormat('en-GB').format(value)}
                    areaChartProps={{ syncId: 'RequestCount' }}
                    series={[
                        { name: 'gRpcTimeTotal', label: 'gRPC', color: 'teal.6' },
                        { name: 'RestTimeTotal', label: 'Rest', color: 'indigo.6' },
                    ]}
                />
                <Divider my="0px" labelPosition="center" />
            </Grid.Col>

            {!hideServerDeserialize &&
                <Grid.Col span={gridSpan} mb="md">
                    <Text mb="md" pl="md" ta="center" fw={700}>Networking Request Data Size (KB)</Text>
                    <AreaChart
                        h={300}
                        data={chartData}
                        dataKey="RequestCount"
                        type="stacked"
                        xAxisLabel="Data Count"
                        yAxisLabel="Request Data Size (KB)"
                        withLegend
                        withPointLabels={false}
                        withDots={false}
                        valueFormatter={(value) => new Intl.NumberFormat('en-GB').format(value / 1024)}
                        areaChartProps={{ syncId: 'RequestCount' }}
                        series={[
                            { name: 'gRpcRequestSize', label: 'gRPC', color: 'teal.6' },
                            { name: 'RestRequestSize', label: 'Rest', color: 'indigo.6' },
                        ]}
                    />
                    <Divider my="0px" labelPosition="center" />
                </Grid.Col>
            }

            {!hideServerSerialize &&
                <Grid.Col span={gridSpan} mb="md">
                    <Text mb="md" pl="md" ta="center" fw={700}>Networking Response Data Size (KB)</Text>
                    <AreaChart
                        h={300}
                        data={chartData}
                        dataKey="RequestCount"
                        type="stacked"
                        xAxisLabel="Data Count"
                        yAxisLabel="Response Data Size (KB)"
                        withLegend
                        withPointLabels={false}
                        withDots={false}
                        valueFormatter={(value) => new Intl.NumberFormat('en-GB').format(value / 1024)}
                        areaChartProps={{ syncId: 'RequestCount' }}
                        series={[
                            { name: 'gRpcResponseSize', label: 'gRPC', color: 'teal.6' },
                            { name: 'RestResponseSize', label: 'Rest', color: 'indigo.6' },
                        ]}
                    />
                    <Divider my="0px" labelPosition="center" />
                </Grid.Col>
            }


            {!hideServerDeserialize &&
                <Grid.Col span={gridSpan} mb="md">
                    <Text mb="md" pl="md" ta="center" fw={700}>Server Deserialize CPU Usage (%)</Text>
                    <AreaChart
                        h={300}
                        data={chartData}
                        dataKey="RequestCount"
                        type="stacked"
                        xAxisLabel="Data Count"
                        yAxisLabel="CPU Usage (%)"
                        withLegend
                        withPointLabels={false}
                        withDots={false}
                        valueFormatter={(value) => new Intl.NumberFormat('en-GB').format(value)}
                        areaChartProps={{ syncId: 'RequestCount' }}
                        series={[
                            { name: 'gRpcServerDeserializeCPU', label: 'gRPC', color: 'teal.6' },
                            { name: 'RestServerDeserializeCPU', label: 'Rest', color: 'indigo.6' },
                        ]}
                    />
                    <Divider my="0px" labelPosition="center" />
                </Grid.Col>
            }

            {!hideServerSerialize &&
                <Grid.Col span={gridSpan} mb="md">
                    <Text mb="md" pl="md" ta="center" fw={700}>Server Serialize CPU Usage (%)</Text>
                    <AreaChart
                        h={300}
                        data={chartData}
                        dataKey="RequestCount"
                        type="stacked"
                        xAxisLabel="Data Count"
                        yAxisLabel="CPU Usage (%)"
                        withLegend
                        withPointLabels={false}
                        withDots={false}
                        valueFormatter={(value) => new Intl.NumberFormat('en-GB').format(value)}
                        areaChartProps={{ syncId: 'RequestCount' }}
                        series={[
                            { name: 'gRpcServerSerializeCPU', label: 'gRPC', color: 'teal.6' },
                            { name: 'RestServerSerializeCPU', label: 'Rest', color: 'indigo.6' },
                        ]}
                    />
                    <Divider my="0px" labelPosition="center" />
                </Grid.Col>
            }

            {!hideServerDeserialize &&
                <Grid.Col span={gridSpan} mb="md">
                    <Text mb="md" pl="md" ta="center" fw={700}>Server Deserialize Time (ms)</Text>
                    <AreaChart
                        h={300}
                        data={chartData}
                        dataKey="RequestCount"
                        type="stacked"
                        xAxisLabel="Data Count"
                        yAxisLabel="Time (ms)"
                        withLegend
                        withPointLabels={false}
                        withDots={false}
                        valueFormatter={(value) => new Intl.NumberFormat('en-GB').format(value * 1000)}
                        areaChartProps={{ syncId: 'RequestCount' }}
                        series={[
                            { name: 'gRpcServerDeserializeTime', label: 'gRPC', color: 'teal.6' },
                            { name: 'RestServerDeserializeTime', label: 'Rest', color: 'indigo.6' },
                        ]}
                    />
                    <Divider my="0px" labelPosition="center" />
                </Grid.Col>
            }

            {!hideServerSerialize &&
                <Grid.Col span={gridSpan} mb="md">
                    <Text mb="md" pl="md" ta="center" fw={700}>Server Serialize Time (ms)</Text>
                    <AreaChart
                        h={300}
                        data={chartData}
                        dataKey="RequestCount"
                        type="stacked"
                        xAxisLabel="Data Count"
                        yAxisLabel="Time (ms)"
                        withLegend
                        withPointLabels={false}
                        withDots={false}
                        valueFormatter={(value) => new Intl.NumberFormat('en-GB').format(value * 1000)}
                        areaChartProps={{ syncId: 'RequestCount' }}
                        series={[
                            { name: 'gRpcServerSerializeTime', label: 'gRPC', color: 'teal.6' },
                            { name: 'RestServerSerializeTime', label: 'Rest', color: 'indigo.6' },
                        ]}
                    />
                    <Divider my="0px" labelPosition="center" />
                </Grid.Col>
            }

            <Grid.Col span={gridSpan} mb="md">
                <Text mb="md" pl="md" ta="center" fw={700}>Server Protocol Total Time (ms)</Text>
                <AreaChart
                    h={300}
                    data={chartData}
                    dataKey="RequestCount"
                    type="stacked"
                    xAxisLabel="Data Count"
                    yAxisLabel="Time (ms)"
                    withLegend
                    withPointLabels={false}
                    withDots={false}
                    valueFormatter={(value) => new Intl.NumberFormat('en-GB').format(value * 1000)}
                    areaChartProps={{ syncId: 'RequestCount' }}
                    series={[
                        { name: 'gRpcServerProtocolTotalTime', label: 'gRPC', color: 'teal.6' },
                        { name: 'RestServerProtocolTotalTime', label: 'Rest', color: 'indigo.6' },
                    ]}
                />
                <Divider my="0px" labelPosition="center" />
            </Grid.Col>

        </Grid>
    )
}