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

import "./AllSalesPageSettings.scss"
import TableHeadersetting from "./TableHeadersetting";
import PaymentOptions from "../../../Payment/PaymentOptions/PaymentOptions";



const AllSalesPageSettings = () => {
    const [settingModal, setsettingModal] = useState(false)
    const [selectedComponent, setselectedComponent] = useState('Payment')
 
    
    const onclose = () => {
        setsettingModal(false)
    }
     const ComponentSelect = (value) => {
        setselectedComponent(value);
        };
     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={700}
            >

                <div>
                     <div
                        className="SettingsListSwitchBTN"
                        >
                        <div
                            className={selectedComponent === 'Payment' ? 'selected' : ''}
                            onClick={() => ComponentSelect('Payment')}
                        >
                            Payment Option
                        </div>
                        <div
                        className={selectedComponent === 'Table' ? 'selected' : ''}
                        onClick={() => ComponentSelect('Table')}
                        >
                                Table
                        </div>
                        </div>  
                          {selectedComponent == "Payment" &&
                                                <div>
                                                    <PaymentOptions />
                                                </div>
                                            }
                        
                        {
                            selectedComponent === "Table" && 
                            <TableHeadersetting />
                        }
                     
                </div>
            </DefaultModal>
        </>
    )
}
 
export default AllSalesPageSettings;