import React from 'react'
import { useState } from 'react'

function SearchBar() {
    return (
        <div className="col-sm-4" style={{ marginBottom: '5px', textAlign: 'right'}}>
            <input type="text" className="form-control" placeholder="Search menu..." />
        </div>
    )
}

function ButtonsC({ filterItems }) {
    const [selectedPackage, setSelectedPackage] = useState("")
    const [selectedMealTime, setSelectedMealTime] = useState("");
    const [firstTimePress, setFirstTimePress] = useState(true);


    const handleButtonClick = (catering_package) => {
        setSelectedPackage(catering_package);

        if (firstTimePress) {
            setFirstTimePress(false);
        }
            filterItems(catering_package, selectedMealTime);
        
    };

    const handleMealTimeButtonClick = (mealTime) => {
        setSelectedMealTime(mealTime);
        if (filterItems && selectedPackage) {
            filterItems(selectedPackage, mealTime);
        }
    };

    // Add a function to determine tier color
    const getTierColor = (tier) => {
        switch (tier) {
            case 'Gold':
                return '#B7950B';
            case 'Silver':
                return '#7B7D7D';
            case 'Silver+':
                return '#626567';
            case 'Bronze':
                return '#935116';
            default:
                return 'white'; // Default color if tier is not recognized
        }
    };

    return (
        <div className="container-fluid" style={{ backgroundColor: '#F4F8FF', marginBottom:'25px'}}>
                <div className="d-flex">
            {["Gold", "Silver", "Bronze"].map((catering_package) => (
                <button
                    key={catering_package}
                    className={`btn p-2 px-3 mx-2 fw-bold fontSize: '30px' ${selectedPackage === catering_package ? 'selected' : ''
                        }`}
                    onClick={() => handleButtonClick(catering_package)}
                    style={{
                        backgroundColor: selectedPackage === catering_package ? getTierColor(catering_package) : '#F2F4F4',
                        color: selectedPackage === catering_package ? 'white' : 'black',
                        border: '2px solid #ccc', // Add border styling
                        borderColor: selectedPackage === catering_package ? 'black' : '#AAAAAA',
                        borderRadius: '10px',
                        padding: '8px 12px',
                        marginRight: '8px',
                        marginBottom: '5px', // Adjust spacing between buttons
                        marginTop: '10px',
                        fontSize: '20px',
                    }}
                >
                    {catering_package}
                </button>
                
            ))}</div>

            <style>
            {`
                @keyframes slideIn {
                from {
                    transform: translateY(-10px);
                    opacity: 0;
                }
                to {
                    transform: translateY(0);
                    opacity: 1;
                }
                }
            `}
            </style>
            
            {selectedPackage && <div className="d-flex justify-content-between align-items-center">
                <div className="ml-4">
                {['Arrival Teas', 'Mid-Morning-Teas', 'Lunch', 'Dinner'].map(
                (mealTime) => (
                    <button
                        key={mealTime}
                        className={`btn p-2 px-3 mx-2 fw-bold ${selectedMealTime === mealTime ? 'selected' : ''
                            }`}
                        onClick={() => handleMealTimeButtonClick(mealTime)}
                        style={{
                            backgroundColor: getTierColor(selectedPackage),
                            color: selectedMealTime === mealTime ? 'white' : 'black',
                            border: '2px solid #ccc', // Add border styling
                            borderColor: selectedMealTime === mealTime ? 'black' : 'white',
                            borderRadius: '10px',
                            padding: '8px 12px',
                            marginRight: '8px',
                            marginBottom: '5px',
                            fontSize: '15px', // Adjust spacing between buttons
                            animation: 'slideIn 2.0s ease-in-out', 
                        }}
                    >
                        {mealTime}
                    </button>
                    )
                )}
            </div>
            {/* <SearchBar/> */}
            </div>}
        </div>
    );
}

export default ButtonsC