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

import usersService from '../../../services/UsersService'

import LoadingSpinner from '../../Spinners/LoadingSpinner'
import { PriceFormatter } from '../../Helpers/PriceFormatter'
import { localImgLoad } from '../../../lib'
import background from '../../../assets/images/bg-sky-blue.jpg'

function FamilyWallet({familyData}) {
  const apiUrl = new usersService()

  let [familyWallet, setFamilyWallet] = useState({loading:true, data: []})

  useEffect(()=>{
    apiUrl.getFamilyWallet({family_uid:familyData?.uid}).then(res => {
      setFamilyWallet({loading:false, data: res?.data?.result_list || []})
    }).catch(error => {
      setFamilyWallet({loading:false, data: []})
    })
  },[])

  return (
    <div className='p-3 w-full h-full bg-white dark:bg-dark-white flex flex-col justify-start items-start'>
        {familyWallet.loading ?
        <div className='w-full h-20 flex justify-center items-center'>
          <LoadingSpinner size='8' color='sky-blue' />
        </div>
        :
        familyWallet?.data?.length > 0 ?
        <div className='w-full p-4 flex flex-col gap-2'>
        {familyWallet?.data?.map((wallet, index)=>(
            <div key={index} className='w-full p-4 bg-[aliceblue] rounded-lg'
              // style={{
              //   background: `url(${background}) 0% 0% / cover no-repeat`,
              // }}
            >
              <div className="w-full flex justify-start items-center gap-3">
                <div className="min-w-[50px] min-h-[50px] max-w-min md:max-w-[80px] max-h-min md:max-h-[80px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
                  <img
                    src={localImgLoad(`images/currency/${(wallet.code).toLowerCase()}.svg`)}
                    className="w-full h-full"
                    alt="currency-icon"
                  />
                </div>
                <div className="balance mt-2 flex justify-center">
                  <div className="flex gap-2">
                    <p className="text-base md:text-lg text-thin-light-gray tracking-wide mb-2 sm:mb-6">
                      Balance:
                    </p>
                    <p 
                      className="text-base md:text-lg font-bold text-purple tracking-wide leading-10"
                      // className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10 xxs:scale-100 lg:scale-100 xl:scale-125"
                      >
                      {PriceFormatter(
                        Number(wallet.amount) * 0.01,
                        wallet.code,
                        wallet.country,
                        ""
                      )}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
        :
        <p className='text-lg text-gray-500 dark:text-gray-400'>No Wallet Found!</p>
        }
    </div>
  )
}

export default FamilyWallet