import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import React from "react";
import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
import {faPlus, faTrash} from "@fortawesome/free-solid-svg-icons";

interface InputFieldProps {
    icon?: IconDefinition,
    fieldName?: string,
    input: React.ReactNode,
    addButtonCallBack?: () => Promise<void>
    removeButtonCallBack?: () => Promise<void>
    isAddButtonDisabled?: boolean
    action?: () => Promise<void>
    actionLabel?: string
    actionIcon?: IconDefinition
    hint?: string,
}

export default function InputField(
    {
        fieldName,
        icon,
        input,
        addButtonCallBack,
        removeButtonCallBack,
        isAddButtonDisabled,
        action,
        actionLabel,
        actionIcon,
        hint
    }: InputFieldProps) {
    return (
        <div className={'flex flex-col'}>
            <div className={'flex justify-between items-center mb-2 lg:mb-3 flex-wrap gap-2'}>
                {
                    fieldName && (
                        <h3 className="text-text-primary text-xl font-[ADLaM Display] font-medium mb-2 flex items-center gap-2">
                            {
                                icon && <FontAwesomeIcon icon={icon} className="text-primary w-5 h-5"/>
                            }
                            {fieldName}
                        </h3>
                    )
                }
                {
                    action && (
                        <button
                            onClick={action}
                            className="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-secondary/50 rounded-lg text-primary hover:bg-secondary hover:shadow-md hover:scale-105 transition-all duration-200 border border-secondary/50 font-medium"
                        >
                            {
                                actionIcon && <FontAwesomeIcon icon={actionIcon} className={'w-3.5 h-3.5'}/>
                            }
                            {
                                actionLabel && <span>{actionLabel}</span>
                            }
                        </button>
                    )
                }
                {hint && (
                    <span
                        className="text-xs text-muted bg-secondary/30 px-3 py-1.5 rounded-lg border border-secondary/30">
                        {hint}
                    </span>
                )}
            </div>
            <div className="flex justify-between items-center gap-2">
                {input}
                {
                    addButtonCallBack && (
                        <button
                            className="bg-primary text-text-primary w-9 h-9 rounded-full flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 hover:bg-primary-dark hover:shadow-lg hover:scale-110 shadow-md"
                            onClick={addButtonCallBack}
                            disabled={isAddButtonDisabled}>
                            <FontAwesomeIcon icon={faPlus} className="w-4 h-4"/>
                        </button>
                    )
                }
                {
                    removeButtonCallBack && (
                        <button
                            className="bg-error/90 hover:bg-error text-text-primary w-9 h-9 rounded-full flex items-center justify-center transition-all duration-200 hover:shadow-lg hover:scale-110 shadow-md"
                            onClick={removeButtonCallBack}
                        >
                            <FontAwesomeIcon icon={faTrash} className={'w-4 h-4'}/>
                        </button>
                    )
                }
            </div>
        </div>
    )
}