import { useState } from "react";
import { IoMdSettings } from "react-icons/io";
import { DefaultModal } from "../../../../Components/Modal/DefaultModal";
import TooltipWrapper from "../../../../Components/Tooltip/Tooltip";

const AllSalesPageSettings = () => {
        const [settingModal,setsettingModal] = useState(false)
        const [checkboxItems, setCheckboxItems] = useState([
            { id: 'item1', label: 'Show Details', checked: true },
            { id: 'item2', label: 'Auto Refresh', checked: false },
            { id: 'item3', label: 'Notifications', checked: true }
        ])
        console.log(settingModal,"settingModal")
    const onclose = () => {
        setsettingModal(false)
    }
    return (
        <>
        <TooltipWrapper>
         <div
            onClick={() => setsettingModal(true)}
            style={{
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                gap: '5px',
                padding: '5px 10px',
                borderRadius: '4px',
            
                fontSize: '14px',
            }}
        >
             <IoMdSettings />  
    </div>
     </TooltipWrapper>  
       
            <DefaultModal 
                open={settingModal} 
                footer={false}
                handleCancel={onclose}
              
                title={"Settings"} width={500}>
                <div style={{ padding: '20px' }}>
                    {checkboxItems.map(item => (
                        <div key={item.id} style={{ marginBottom: '10px' }}>
                            <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
                                <input
                                    type="checkbox"
                                    checked={item.checked}
                                    onChange={(e) => {
                                        setCheckboxItems(prev => 
                                            prev.map(i => 
                                                i.id === item.id ? { ...i, checked: e.target.checked } : i
                                            )
                                        )
                                    }}
                                />
                                {item.label}
                            </label>
                        </div>
                    ))}
                </div>
             </DefaultModal>
             </>
    )
}
 
export default AllSalesPageSettings;