import * as React from 'react';
import { Sites, useTopBar } from 'cordova-sites';
import { FunctionComponent, useCallback } from 'react';
import { Button, Switch } from 'react-bootstrap-mobile';
import { useAppDispatch, useAppSelector } from '../Store/reduxHooks';
import { setDesign } from './settingsSlice';

type Props = {};

export const Settings: FunctionComponent<Props> = React.memo(({}) => {
    // Variables
    const design = useAppSelector((state) => state.settings.design);
    const isActive = design === 'flat';
    const dispatch = useAppDispatch();

    // States

    // Refs

    // Callbacks
    const toggleThemeCallback = useCallback(() => {
        if (design === 'material') {
            dispatch(setDesign('flat'));
        } else {
            dispatch(setDesign('material'));
        }
    }, [dispatch, design]);

    // Effects
    useTopBar({
        title: 'Settings',
    });

    // Other

    // Render Functions

    return (
        <>
            <br />
            <br />
            <Switch id="switchTheme" checked={isActive} preLabel="android" isDual={true} onChange={toggleThemeCallback}>
                ios
            </Switch>
            <Button onClick={toggleThemeCallback}>Change Theme</Button>
        </>
    );
});
Sites.addInitialization((app) => app.addDeepLink('/Settings', Settings));