import { ActionIcon, Affix, AffixProps, rem, Transition } from "@mantine/core";
import { IconArrowRight } from "@tabler/icons-react";
import { useSelector } from "react-redux";
import { RootState, useAppDispatch } from "../../redux/store.ts";
import { setHideNavbar } from "../../features/uiSlice.ts";
import { FC } from "react";
import stylesCss from "./HideNavbarAffix.module.css";

type Props = AffixProps;
const HideNavbarAffix: FC<Props> = (props) => {
    const uiState = useSelector((state: RootState) => state.ui);
    const dispatch = useAppDispatch();
    return (
        <>
            <Transition
                transition={"slide-right"}
                mounted={uiState.hideNavbar}
            >
                {styles => (
                    <Affix
                        style={styles}
                        position={{
                            top: "50%",
                            left: rem(20),
                        }}
                        {...props}
                    >
                        <ActionIcon
                            onClick={() => {
                                dispatch(setHideNavbar(false));

                            }}
                            className={stylesCss["icon"]}
                            radius="xl"
                            size={45}>
                            <IconArrowRight
                                stroke={1.5}
                            />
                        </ActionIcon>
                    </Affix>)}
            </Transition>
        </>

    );
};

export default HideNavbarAffix;