import React, { useEffect, useState } from 'react'
import SearchCom from '../Helpers/SearchCom'
import LoadingSpinner from '../Spinners/LoadingSpinner';
import { Link } from 'react-router-dom';
import { useSelector } from 'react-redux';

export default function FamilyWalletRedeemOptions() {

    const { familyWalletRedeemOptList } = useSelector((state) => state.familyWalletRedeemOptList); // FAMILY WALLET REDDEM OPTIONS LIST

    const [filteredRedeemData, setFilteredRedeemData] = useState({value: '', data:{}}) // State to hold filtered redeem banner option
  
    const handleFilterRedeemData = ({target}) => {
        // thiskey01
      let filterWord = target.value
      let filteredData = {}
      if(!filterWord){
        filteredData = {...familyWalletRedeemOptList?.data}
      }else{
        let matchedData = Object.keys(familyWalletRedeemOptList?.data)?.filter(item => (item.toLowerCase().startsWith(filterWord.toLowerCase())))
        filteredData = matchedData.map(item => familyWalletRedeemOptList.data[item])
      }
      setFilteredRedeemData({value:target.value, data: {...filteredData}})
    }

    useEffect(()=>{
        setFilteredRedeemData(prev => ({...prev, data:{...familyWalletRedeemOptList?.data}}))
    }, [familyWalletRedeemOptList.image])

  return (
    <div className="w-full">
        <div className="w-full sm:flex items-center gap-4">
            <h1 className="text-2xl font-bold text-black dark:text-white">Redeem Options</h1>
            <div className="sm:w-1/2 w-full sm:pr-20 pr-0 mb-5 sm:mb-0">
                <SearchCom 
                placeholder='Search...' 
                value={filteredRedeemData.value}
                handleSearch={handleFilterRedeemData}
                />
            </div>
        </div>

        {/* redeem options */}
            {familyWalletRedeemOptList.loading ? 
            <div className='mt-5 w-full h-[20rem] rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white flex justify-center items-center'>
                <LoadingSpinner size='10' color='sky-blue' height='h-[30rem]' />
            </div>
            : Object.keys(familyWalletRedeemOptList?.data)?.length > 0 ?
                Object.keys(filteredRedeemData?.data)?.length ?
                    <div className="mt-5 grid sm:grid-cols-2 lg:grid-cols-3 xxl:grid-cols-4 gap-4">
                        { Object.keys(filteredRedeemData?.data)?.map((item)=>{
                            // text, image, description, action
                            let newData = filteredRedeemData?.data[item].banner
                            let bgImage = `url(${newData?.image})`
                            return (
                                <Link to={''} key={item}>
                                    <div className={`group relative h-60 text-black dark:text-white rounded-2xl shadow-md hover:shadow-none transition-all duration-300 overflow-hidden`}
                                    style={{
                                        // background: `#ffffff ${bgImage} no-repeat center center / cover`
                                    }}
                                    >
                                        <img src={newData?.image} alt='Redeem Image' className='w-full h-full bg-cover rounded-2xl group-hover:scale-110 transition-all duration-300' />
                                        <div className='absolute bottom-0 mb-1 left-1/2 -translate-x-1/2 p-2 bg-white/80 rounded-2xl w-[90%] flex flex-col justify-center items-center gap-2'>
                                            <h1 className='text-lg font-bold text-[#083e21]'>{newData.text}</h1>
                                        </div>
                                    </div>
                                </Link>
                            )
                        })}
                    </div>
                :
                <div className='mt-5 w-full h-[20rem] rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white flex justify-center items-center'>
                    <p>Search Item not Found!</p>
                </div>
            :
            <div className='mt-5 w-full h-[20rem] rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white flex justify-center items-center'>
                <p>No Redeem Options Found!</p>
            </div>
            }
    </div>
  )
}