import {Link} from 'react-router-dom'
import Icons from "../Helpers/Icons";
import bank1 from "../../assets/images/bank-1.png";
import bank2 from "../../assets/images/bank-2.png";
import bank3 from "../../assets/images/bank-3.png";
import bank4 from "../../assets/images/bank-4.png";
import Accordion from "../Helpers/Accordion";

export default function WalletHeader(props) {
  //  debugger;
    //props.myWalletList.result_list
    return (
        <>
            <div
                className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]  items-center rounded-full relative  bg-purple pr-1.5 pl-4">
                <div
                    onClick={() => props.handlerBalance()}
                    className="flex items-center lg:justify-between justify-center w-full h-full"
                >
                <span className="lg:block hidden">
                  <Icons name="wallet"/>
                </span>
                    <p className="lg:text-xl text-lg font-bold text-white">
                        Wallet
                    </p>
                    <span className="lg:block hidden">
                  <Icons name="deep-plus"/>
                </span>
                </div>
                <div
                    className={`balance-dropdown w-96 z-30 bg-white dark:bg-dark-white   absolute -left-24 rounded-lg cursor-pointer ${
                        props.balanceDropdown ? "active" : ""
                    }`}
                >
                    <div className="heading border-b dark:border-[#5356fb29]  border-light-purple px-7 py-6">
                        <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
                            Wallet
                        </h3>
                    </div>
                    <div className="content px-7 pb-7">
                        <ul>

                            {props.myWalletList &&
                                props.myWalletList?.result_list?.length > 0 &&
                                props.myWalletList.result_list.map((value, index) => (
                                    <li key={index} className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">
                                        <div className="sm:flex justify-between items-center">
                                            <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
                                                <div
                                                    className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
                                                    <img src={bank1} alt=""/>
                                                </div>
                                                <div className="name">
                                                    <p className="text-base text-dark-gray dark:text-white font-medium">
                                                        {value.description}
                                                    </p>
                                                </div>
                                            </div>
                                            <div>
                                                <p className="eth text-xl font-bold text-purple">
                                                    {(value.amount*0.01).toFixed(2)} {value.code}
                                                </p>
                                                <p className="usd text-base text-thin-light-gray text-right">
                                                    {/*(773.69 USD)*/}
                                                </p>
                                            </div>
                                        </div>
                                    </li>
                                ))}

                            {/*<li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">*/}
                            {/*    <div className="sm:flex justify-between items-center">*/}
                            {/*        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
                            {/*            <div*/}
                            {/*                className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
                            {/*                <img src={bank1} alt=""/>*/}
                            {/*            </div>*/}
                            {/*            <div className="name">*/}
                            {/*                <p className="text-base text-dark-gray dark:text-white font-medium">*/}
                            {/*                    MetaMask*/}
                            {/*                </p>*/}
                            {/*            </div>*/}
                            {/*        </div>*/}
                            {/*        <div>*/}
                            {/*            <p className="eth text-xl font-bold text-purple">*/}
                            {/*                75,320 ETH*/}
                            {/*            </p>*/}
                            {/*            <p className="usd text-base text-thin-light-gray text-right">*/}
                            {/*                (773.69 USD)*/}
                            {/*            </p>*/}
                            {/*        </div>*/}
                            {/*    </div>*/}
                            {/*</li>*/}
                            {/*<li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">*/}
                            {/*    <div className="sm:flex justify-between items-center">*/}
                            {/*        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
                            {/*            <div*/}
                            {/*                className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
                            {/*                <img src={bank2} alt=""/>*/}
                            {/*            </div>*/}
                            {/*            <div className="name">*/}
                            {/*                <p className="text-base text-dark-gray dark:text-white font-medium">*/}
                            {/*                    Coinbase Wallet*/}
                            {/*                </p>*/}
                            {/*            </div>*/}
                            {/*        </div>*/}
                            {/*        <div>*/}
                            {/*            <p className="eth text-xl font-bold text-purple">*/}
                            {/*                56,124 ETH*/}
                            {/*            </p>*/}
                            {/*            <p className="usd text-base text-thin-light-gray text-right">*/}
                            {/*                (773.69 USD)*/}
                            {/*            </p>*/}
                            {/*        </div>*/}
                            {/*    </div>*/}
                            {/*</li>*/}
                            {/*<li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">*/}
                            {/*    <div className="sm:flex justify-between items-center">*/}
                            {/*        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
                            {/*            <div*/}
                            {/*                className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
                            {/*                <img src={bank3} alt=""/>*/}
                            {/*            </div>*/}
                            {/*            <div className="name">*/}
                            {/*                <p className="text-base text-dark-gray dark:text-white font-medium">*/}
                            {/*                    Bitski*/}
                            {/*                </p>*/}
                            {/*            </div>*/}
                            {/*        </div>*/}
                            {/*        <div>*/}
                            {/*            <p className="eth text-xl font-bold text-purple">*/}
                            {/*                99,123 ETH*/}
                            {/*            </p>*/}
                            {/*            <p className="usd text-base text-thin-light-gray text-right">*/}
                            {/*                (773.69 USD)*/}
                            {/*            </p>*/}
                            {/*        </div>*/}
                            {/*    </div>*/}
                            {/*</li>*/}
                            {/*<li className="content-item py-5">*/}
                            {/*    <div className="sm:flex justify-between items-center">*/}
                            {/*        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
                            {/*            <div*/}
                            {/*                className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
                            {/*                <img src={bank4} alt=""/>*/}
                            {/*            </div>*/}
                            {/*            <div className="name">*/}
                            {/*                <p className="text-base text-dark-gray dark:text-white font-medium">*/}
                            {/*                    WalletConnect*/}
                            {/*                </p>*/}
                            {/*            </div>*/}
                            {/*        </div>*/}
                            {/*        <div>*/}
                            {/*            <p className="eth text-xl font-bold text-purple">*/}
                            {/*                43,728 ETH*/}
                            {/*            </p>*/}
                            {/*            <p className="usd text-base text-thin-light-gray text-right">*/}
                            {/*                (773.69 USD)*/}
                            {/*            </p>*/}
                            {/*        </div>*/}
                            {/*    </div>*/}
                            {/*</li>*/}
                        </ul>
                        <div className="add-money-btn flex justify-center items-center mt-3">
                            {/* <button
                                onClick={() => props.addMoneyHandler()}
                                type="button"
                                className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                            >
                                Manage
                            </button> */}
                            <Link to='/my-wallet' className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">Manage</Link>
                        </div>
                    </div>
                </div>
            </div>
            {/*<div*/}
            {/*    className="lg:hidden flex user-balance cursor-pointer lg:w-[252px] w-[150px] h-[48px]  items-center rounded-full relative  bg-purple">*/}
            {/*    <div className="flex items-center lg:justify-between justify-center w-full h-full">*/}
            {/*        <p className="lg:text-xl text-lg font-bold text-white">*/}
            {/*            $ 234,435.34*/}
            {/*        </p>*/}
            {/*    </div>*/}
            {/*</div>*/}
            <div className="lg:hidden block"></div>
        </>);
}