import {
    Button, Checkbox, Flex,
    Grid, Group,
    NumberInput,
    Progress, Slider, Stack, Text,
} from "@mantine/core";
import React, {useEffect, useMemo, useState} from "react";
import {flexLeftWeight, maxWidth} from "~/styles.ts";
import DownloadIcon from "mdi-react/DownloadIcon";
import PlayIcon from "mdi-react/PlayIcon";
import StopIcon from "mdi-react/StopIcon";


export function PerformanceTestFilter(
    {onChange, onClickStart, onClickStop, onClickExportData, isStarting, currentCount, requestStopping, isPushTest}: {
        onChange: (startsCount: number, endsCount: number, addCount: number, avgCount: number, maxExampleCount: number, hideServerDeserialize: boolean,
                   hideServerSerialize: boolean, chartsSize: number) => void,
        onClickStart: () => void,
        onClickStop: () => void,
        onClickExportData: () => void,
        isStarting: boolean,
        requestStopping: boolean,
        currentCount: number,
        isPushTest: boolean
    }
) {
    const [startsCount, setStartsCount] = useState(200)
    const [endsCount, setEndsCount] = useState(100000)
    const [addCount, setAddCount] = useState(200)
    const [avgCount, setAvgCount] = useState(3)
    const [maxExampleCount, setMaxExampleCount] = useState(30)
    const [hideServerDeserialize, setHideServerDeserialize] = useState(!isPushTest)
    const [hideServerSerialize, setHideServerSerialize] = useState(isPushTest)
    const [chartsSize, setChartsSize] = useState(6)


    useEffect(() => {
        onChange(startsCount, endsCount, addCount, avgCount, maxExampleCount, hideServerDeserialize, hideServerSerialize, chartsSize)
    }, [startsCount, endsCount, addCount, avgCount, maxExampleCount, hideServerDeserialize, hideServerSerialize, chartsSize]);

    const getCurrentProgress = (start: number, end: number, value: number) => {
        if (end <= start) return 0;
        return Math.min(Math.max(0, value - start), end - start) / (end - start) * 100;
    }

    const validChartsSizeValues = [1, 2, 3, 4, 6, 12];

    return (
        <Grid gutter="xs" grow>
            <Grid.Col span={4} mb="md">
                <NumberInput
                    label="Starts Count"
                    description="Starting number of records"
                    thousandSeparator=","
                    value={startsCount}
                    disabled={isStarting}
                    onChange={(value) => (setStartsCount(typeof value === 'number' ? value : parseInt(value)))}
                />
            </Grid.Col>

            <Grid.Col span={4} mb="md">
                <NumberInput
                    label="Ends Count"
                    description="Maximum number of records"
                    max={110000}
                    thousandSeparator=","
                    value={endsCount}
                    disabled={isStarting}
                    onChange={(value) => (setEndsCount(typeof value === 'number' ? value : parseInt(value)))}
                />
            </Grid.Col>

            <Grid.Col span={4} mb="md">
                <NumberInput
                    label="Step Count"
                    description="Records to add per test iteration"
                    thousandSeparator=","
                    value={addCount}
                    disabled={isStarting}
                    onChange={(value) => (setAddCount(typeof value === 'number' ? value : parseInt(value)))}
                />
            </Grid.Col>

            <Grid.Col span={6} mb="md">
                <NumberInput
                    label="Iterations"
                    description="Number of times to repeat each test"
                    thousandSeparator=","
                    value={avgCount}
                    disabled={isStarting}
                    onChange={(value) => (setAvgCount(typeof value === 'number' ? value : parseInt(value)))}
                />
            </Grid.Col>

            {!isPushTest &&
                <Grid.Col span={6} mb="md">
                    <NumberInput
                        label="Sample Limit"
                        description="Max records to display in preview"
                        thousandSeparator=","
                        value={maxExampleCount}
                        disabled={isStarting}
                        onChange={(value) => (setMaxExampleCount(typeof value === 'number' ? value : parseInt(value)))}
                    />
                </Grid.Col>
            }

            <Grid.Col span={7} mb="md">
                <Text fw={500} size="sm">Charts Size</Text>
                <Slider min={1} max={6} defaultValue={5}
                        marks={Array.from({ length: 6 }, (_, i) => ({
                            value: i + 1,
                            label: `${i + 1}`
                        }))}
                        value={validChartsSizeValues.indexOf(chartsSize) + 1} onChange={(value) => setChartsSize(validChartsSizeValues[value - 1])} />
            </Grid.Col>

            <Grid.Col span={3} mb="md">
                <Stack h="95%" justify="flex-end">
                    <Group>
                        <Checkbox label="Hide Server Deserialize Info Chart" checked={hideServerDeserialize} defaultChecked={hideServerDeserialize}
                                  onChange={(event) => setHideServerDeserialize(event.currentTarget.checked)}/>
                        <Checkbox label="Hide Server Serialize Info Chart" checked={hideServerSerialize} defaultChecked={hideServerSerialize}
                                  onChange={(event) => setHideServerSerialize(event.currentTarget.checked)}/>
                    </Group>
                </Stack>
            </Grid.Col>

            <Grid.Col span={12} mb="md">
                <Flex align="center" gap="lg">
                    <Stack gap="1px" style={flexLeftWeight}>
                        <Text size="sm">{`${currentCount} / ${endsCount}`}</Text>
                        <Progress.Root size="xl">
                            <Progress.Section value={getCurrentProgress(startsCount, endsCount, currentCount)} animated={isStarting}>
                                <Progress.Label>{`${currentCount} / ${endsCount}`}</Progress.Label>
                            </Progress.Section>
                        </Progress.Root>
                    </Stack>

                    <Group>
                        {
                            isStarting
                                ? <Button color="red" onClick={onClickStop} disabled={requestStopping} leftSection={<StopIcon />}>Stop</Button>
                                : <Button onClick={onClickStart} leftSection={<PlayIcon />}>Start</Button>
                        }
                        <Button leftSection={<DownloadIcon />} onClick={onClickExportData}>Export</Button>
                    </Group>
                </Flex>
            </Grid.Col>
        </Grid>
    )
}