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';
import PreferenceList from '../../../Preference/PreferenceList';

const AllSalesPageSettings = () => {
  const [settingModal, setsettingModal] = useState(false);
  const [selectedComponent, setselectedComponent] = useState('Payment');

  const onclose = () => {
    setsettingModal(false);
  };
  const ComponentSelect = (value) => {
    setselectedComponent(value);
  };
  return (
    <>
      <TooltipWrapper>
        <div
          className="allpageSettingIcon"
          onClick={() => setsettingModal(true)}
          style={{
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            gap: '5px',
            padding: '5px 10px',
            borderRadius: '4px',
            fontSize: '14px',
            backgroundColor: '#f0f0f0',
          }}
        >
          <IoMdSettings size={16} />
        </div>
      </TooltipWrapper>

      <DefaultModal
        className={'sales-setting-modal'}
        open={settingModal}
        footer={false}
        handleCancel={onclose}
        title={'Settings'}
        width={850}
      >
        <div className="AllSalesPageSettingsMainDiv">
          <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
              className={selectedComponent === 'Preference' ? 'selected' : ''}
              onClick={() => ComponentSelect('Preference')}
            >
              Preference
            </div>
          </div>
          <div className={`SettingsComponentDiv ${selectedComponent === 'Preference' ? 'no-overflow' : ''}`}>
            {selectedComponent == 'Payment' && (
              <div>
                <PaymentOptions setModalOpen={setsettingModal} />
              </div>
            )}

            {selectedComponent === 'Table' && (
              <TableHeadersetting setModalOpen={setsettingModal} />
            )}
            {selectedComponent === 'Preference' && (
              <PreferenceList setting={true} />
            )}

          </div>
        </div>
      </DefaultModal>
    </>
  );
};

export default AllSalesPageSettings;