import React from "react";
import InputRange from "../../../../../ui/inputs/InputRange";
import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
import SwapAction from "./SwapAction";

interface ManufactureActionProps {
    processTime: {
        value: number;
        min: number;
        max: number;
        disabled?: boolean,
        onChange: (value: number) => void;
    };
    manufactureCount: {
        value: number;
        min: number;
        max: number;
        step: number;
        defaultValue: string,
        disabled: false,
        onChange: (value: number) => void;
    }
    swapOptions: string[];
    swapDefaultOption: string;
    onSwapSelect: (value: string) => void;
    clearPoints: () => void;
}

const ManufactureAction: React.FC<ManufactureActionProps> = ({
    processTime,
    manufactureCount,
    swapOptions,
    swapDefaultOption,
    onSwapSelect,
    clearPoints
}) => {
    return (
        <>
            <InputRange
                label="Process Time"
                value={processTime.value}
                min={processTime.min}
                max={processTime.max}
                disabled={processTime.disabled}
                onClick={() => { }}
                onChange={processTime.onChange}
            />

            {manufactureCount && (
                <InputWithDropDown
                    label="Manufacture Count"
                    value={manufactureCount.value.toString()}
                    min={manufactureCount.min}
                    max={manufactureCount.max}
                    disabled={manufactureCount.disabled}
                    defaultValue={manufactureCount.defaultValue}
                    step={manufactureCount.step}
                    activeOption="unit"
                    onClick={() => { }}
                    onChange={(value) => manufactureCount.onChange(parseInt(value))}
                />
            )}
            <SwapAction
                options={swapOptions}
                defaultOption={swapDefaultOption}
                onSelect={onSwapSelect}
            />
            <div className="selected-actions-list">
                <div className="value-field-container">
                    <div className="label">Reset Points</div>
                    <button
                        id="reset-button"
                        type="button"
                        className="regularDropdown-container"
                        onClick={clearPoints}
                    >
                        Clear
                    </button>
                </div>
            </div>
        </>
    );
};

export default ManufactureAction;
