import * as React from 'react';
import { Checkbox, Switch } from 'react-bootstrap-mobile';
import { useCallback } from 'react';
import { useAppDispatch, useAppSelector } from '../Store/reduxHooks';
import { setUsePartners, setUseWeekdays } from './prayerCircleSlice';
import { setDesign } from '../Settings/settingsSlice';

export type PrayerCircleSettingsProps = {};

function PrayerCircleSettings({}: PrayerCircleSettingsProps) {
    // Variables
    const dispatch = useAppDispatch();
    const useWeekdays = useAppSelector((store) => store.prayerCircle.useWeekdays ?? false);
    const usePartners = useAppSelector((store) => store.prayerCircle.usePartners ?? true);
    const design = useAppSelector((state) => state.settings.design);

    // States

    // Refs

    // Callbacks
    const onChangeUseWeekdays = useCallback(({ target: { checked } }) => dispatch(setUseWeekdays(checked)), [dispatch]);
    const onChangeUsePartners = useCallback(({ target: { checked } }) => dispatch(setUsePartners(checked)), [dispatch]);
    const toggleThemeCallback = useCallback(() => {
        if (design === 'material') {
            dispatch(setDesign('flat'));
        } else {
            dispatch(setDesign('material'));
        }
    }, [dispatch, design]);

    // Effects

    // Other

    // Render Functions

    return (
        <>
            <Switch preLabel="Kette" onChange={onChangeUsePartners} checked={usePartners}>
                Partner
            </Switch>
            <br />
            <Checkbox label="Benutze Wochentage" checked={useWeekdays} onChange={onChangeUseWeekdays} />
            <br />
            <Switch
                id="switchTheme"
                checked={design === 'flat'}
                preLabel="android"
                isDual={true}
                onChange={toggleThemeCallback}
            >
                ios
            </Switch>
        </>
    );
}

const tmp = React.memo(PrayerCircleSettings) as typeof PrayerCircleSettings;
export { tmp as PrayerCircleSettings };
