import * as React from 'react';
import { connect } from 'react-redux';
import { Ionicons } from '@expo/vector-icons';
import { BasicLayout, Settings } from '../../components';
import { useNavigate } from 'react-router-native';
import { useSelector } from 'react-redux';
import { CHANGE_SETTINGS_ACTION } from '@admin-layout/client';

export interface ReduxState {
    settings: Settings;
}

const Layout: React.FC<any & ReduxState & { routeParams: any }> = (props) => {
    const user = useSelector((state: any) => state?.user);
    const { settings } = props;
    const navigate = useNavigate();

    const logout = () => {
        navigate('/logout');
    };
    return (
        <BasicLayout
            {...props}
            {...settings}
            showSettings={true}
            currentRoute={props.route.routes.find((route) => {
                if (route.path.split('/').pop() === props.location.pathname.split('/').pop()) {
                    return route;
                } else if (
                    route.path.split('/')[route.path.split('/').length - 2] ===
                    props.location.pathname.split('/')[props.location.pathname.split('/').length - 2]
                ) {
                    return route;
                }
            })}
            rightContentRender={(rightProps) => {
                return (
                    <Ionicons
                        color={rightProps.navTheme === 'dark' ? 'white' : 'black'}
                        name="exit-outline"
                        onPress={() => logout()}
                    />
                );
            }}
        />
    );
};

export default connect(
    ({ settings, router }: any) => ({
        settings,
        location: router.location,
    }),
    (dispatch) => ({
        onSettingChange: (data: any) =>
            dispatch({
                type: CHANGE_SETTINGS_ACTION,
                payload: data,
            }),
    }),
)(Layout);