import { FC, useEffect, useState } from 'react';
import { LocalizeText, WiredFurniType } from '../../../../api';
import { Slider, Text } from '../../../../common';
import { useWired } from '../../../../hooks';
import { WiredExtraBaseView } from './WiredExtraBaseView';

const MIN_EXECUTIONS = 1;
const MAX_EXECUTIONS = 100;
const DEFAULT_EXECUTIONS = 1;
const MIN_TIME_WINDOW_MS = 1000;
const MAX_TIME_WINDOW_MS = 10000;
const DEFAULT_TIME_WINDOW_MS = 1000;
const TIME_WINDOW_STEP_MS = 500;

const normalizeExecutions = (value: number) =>
{
    if(isNaN(value)) return DEFAULT_EXECUTIONS;

    return Math.max(MIN_EXECUTIONS, Math.min(MAX_EXECUTIONS, Math.round(value)));
};

const normalizeTimeWindow = (value: number) =>
{
    if(isNaN(value)) return DEFAULT_TIME_WINDOW_MS;

    const clampedValue = Math.max(MIN_TIME_WINDOW_MS, Math.min(MAX_TIME_WINDOW_MS, value));

    return Math.round(clampedValue / TIME_WINDOW_STEP_MS) * TIME_WINDOW_STEP_MS;
};

const formatTimeWindow = (value: number) =>
{
    const seconds = value / 1000;

    return Number.isInteger(seconds) ? seconds.toString() : seconds.toFixed(1);
};

export const WiredExtraExecutionLimitView: FC<{}> = () =>
{
    const { trigger = null, setIntParams = null, setStringParam = null } = useWired();
    const [ executions, setExecutions ] = useState(DEFAULT_EXECUTIONS);
    const [ timeWindowMs, setTimeWindowMs ] = useState(DEFAULT_TIME_WINDOW_MS);

    useEffect(() =>
    {
        if(!trigger) return;

        setExecutions(normalizeExecutions((trigger.intData.length > 0) ? trigger.intData[0] : DEFAULT_EXECUTIONS));
        setTimeWindowMs(normalizeTimeWindow((trigger.intData.length > 1) ? trigger.intData[1] : DEFAULT_TIME_WINDOW_MS));
    }, [ trigger ]);

    const save = () =>
    {
        setIntParams([ normalizeExecutions(executions), normalizeTimeWindow(timeWindowMs) ]);
        setStringParam('');
    };

    return (
        <WiredExtraBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save } cardStyle={ { width: 380 } }>
            <div className="flex flex-col gap-2">
                <div className="flex flex-col gap-2">
                    <Text>{ LocalizeText('wiredfurni.params.setexecutions', [ 'amount' ], [ executions.toString() ]) }</Text>
                    <Slider
                        min={ MIN_EXECUTIONS }
                        max={ MAX_EXECUTIONS }
                        step={ 1 }
                        value={ executions }
                        onChange={ value => setExecutions(normalizeExecutions(Array.isArray(value) ? value[0] : Number(value))) } />
                    <Text small>{ executions }</Text>
                </div>
                <div className="flex flex-col gap-2">
                    <Text>{ LocalizeText('wiredfurni.params.settimewindow', [ 'timewindow' ], [ formatTimeWindow(timeWindowMs) ]) }</Text>
                    <Slider
                        min={ MIN_TIME_WINDOW_MS }
                        max={ MAX_TIME_WINDOW_MS }
                        step={ TIME_WINDOW_STEP_MS }
                        value={ timeWindowMs }
                        onChange={ value => setTimeWindowMs(normalizeTimeWindow(Array.isArray(value) ? value[0] : Number(value))) } />
                    <Text small>{ formatTimeWindow(timeWindowMs) }s</Text>
                </div>
            </div>
        </WiredExtraBaseView>
    );
};
