import React, { useState } from 'react';
import { HiBars3BottomLeft } from "react-icons/hi2";
import { FaCheck } from "react-icons/fa6";
import '../App.css'
import WithdrawalForm from './WithdrawalForm';


function WithdrawalContent() {
    const [showFilterMenu, setShowFilterMenu] = useState(true);
    const [showModal, setShowModal] = useState(false);

    const toggleFilterMenu = () => {
        setShowFilterMenu(prevState => !prevState);
    };

    const cekimFormOpen = () => {
        setShowModal(true);
    }

    const cekimFormClose = () => {
        setShowModal(false);
    }

    return (
        <>
            <div className='w-full border-4 bg-slate-200  border-slate-200'>
                <div className='flex flex-col p-5 border-4 gap-4 items-start justify-center'>

                    <div className='flex items-center justify-between border border-black border-r-0 border-t-0 border-l-0 pb-2 flex-wrap gap-4 w-full'>
                        <button onClick={cekimFormOpen} type='button' alt="cekim-button" className='p-1.5 text-xs rounded-lg bg-emerald-500 text-white'>
                            Banka Çekim Talebi Oluştur
                        </button>
                        <div className='flex flex-row items-center text-sm gap-1  justify-center'>
                            <input type='date'></input>
                            ve
                            <input type='date'></input>
                        </div>
                    </div>

                    {cekimFormOpen && (<WithdrawalForm show={showModal} title="Çekim Talebi Oluşturma Formu" onClose={cekimFormClose} />)}
                    
                    <div onClick={toggleFilterMenu} className='items-center cursor-pointer gap-1 justify-center flex-row text-xs flex'>
                        <button type='button'>
                            Filtrele
                        </button>
                        <HiBars3BottomLeft />
                    </div>

                    {!showFilterMenu && (
                        <div className='w-full'>
                            <div className='flex items-center md:items-start flex-wrap flex-1 gap-6 justify-between'>
                                <div className='flex flex-col items-start text-sm justify-center gap-3.5'>
                                    <h5>Siteler</h5>
                                    <div className='flex flex-row text-xs items-center justify-center gap-1'>
                                        <input type='checkbox'></input>
                                        <h5>Hepsini Seç</h5>
                                    </div>
                                    <div>
                                        <select className='rounded-md w-28 p-1 text-xs'>
                                            <option value="Site1">Site1</option>
                                            <option value="Site2">Site2</option>
                                            <option value="Site3">Site3</option>
                                            <option value="Site4">Site4</option>
                                            <option value="Site5">Site5</option>
                                        </select>
                                    </div>
                                    <div className='text-sm'>
                                        <h5>Hesaplar</h5>
                                    </div>
                                    <div className='flex flex-row text-xs items-center justify-center gap-1'>
                                        <input type='checkbox'></input>
                                        <h5>Hepsini Seç</h5>
                                    </div>
                                    <select className='rounded-md w-28 p-1 text-xs'>
                                        <option value="Site1">Site1</option>
                                        <option value="Site2">Site2</option>
                                        <option value="Site3">Site3</option>
                                        <option value="Site4">Site4</option>
                                        <option value="Site5">Site5</option>
                                    </select>
                                    <div className='flex flex-col md:flex-row items-start justify-center flex-wrap text-xs gap-0 md:gap-4'>
                                      
                                        <label className='flex flex-row items-center justify-center gap-1' htmlFor='bekleyenler'>
                                            <input id='bekleyenler' type='checkbox'></input>
                                            <h6 className='text-blue-500 font-semibold'>Bekleyenler</h6>
                                        </label>
                                   
                                        <label className='flex flex-row items-center justify-center gap-1' htmlFor='islemdekiler'>
                                            <input id='islemdekiler' type='checkbox'></input>
                                            <h6 className='text-blue-500 font-semibold'>İşlemdekiler</h6>
                                        </label>

                                        <label className='flex flex-row items-center justify-center gap-1' htmlFor='onaylananlar'>
                                            <input id='onaylananlar' type='checkbox'></input>
                                            <h6 className='text-blue-500 font-semibold'>Onaylananlar</h6>
                                        </label>

                                        <label className='flex flex-row items-center justify-center gap-1' htmlFor='reddedilenler'>
                                            <input id='reddedilenler' type='checkbox'></input>
                                            <h6 className='text-blue-500 font-semibold'>Reddedilenler</h6>
                                        </label>

                                        <label className='flex flex-row items-center justify-center gap-1' htmlFor='banka-onay-bekleyen'>
                                            <input id='banka-onay-bekleyen' type='checkbox'></input>
                                            <h6 className='text-blue-500 font-semibold'>Banka Onayı Bekleyenler</h6>
                                        </label>
                                    </div>
                                </div>
                                <div className='flex flex-col items-start justify-center gap-5'>
                                    <div className='flex flex-row items-center text-xs justify-center gap-1'>
                                        <h1>Tutar Aralığı</h1>
                                        <input type='number' placeholder='0 ₺' className='rounded-sm text-center w-28 p-1 text-xs' />
                                        ve
                                        <input type='number' placeholder='500.000 ₺' className='rounded-sm w-28 text-center p-1 text-xs' />
                                    </div>
                                    <div className='flex items-center justify-center'>
                                        <div className='flex flex-row items-center justify-center rounded-lg p-1 bg-emerald-600 text-white'>
                                            <FaCheck size={10}></FaCheck>
                                            <button type='button' alt="button-reload" className='text-xs p-1 rounded-lg'>Otomatik Güncelleştirme Açık</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </>
    )
}

export default WithdrawalContent;