import useAppSelector from "@insite/client-framework/Common/Hooks/useAppSelector";
import setShowInventory from "@insite/client-framework/Store/Context/Handlers/SetShowInventory";
import translate from "@insite/client-framework/Translate";
import { useMergeStyles } from "@insite/content-library/additionalStyles";
import Clickable, { ClickablePresentationProps } from "@insite/mobius/Clickable";
import Icon, { IconPresentationProps } from "@insite/mobius/Icon";
import Eye from "@insite/mobius/Icons/Eye";
import EyeOff from "@insite/mobius/Icons/EyeOff";
import Typography, { TypographyPresentationProps } from "@insite/mobius/Typography";
import React from "react";
import { useDispatch } from "react-redux";
import { css } from "styled-components";

interface OwnProps {
    extendedStyles?: ShowInventoryToggleStyles;
}

export interface ShowInventoryToggleStyles {
    toggleClickable?: ClickablePresentationProps;
    toggleIcon?: IconPresentationProps;
    toggleTypography?: TypographyPresentationProps;
}

export const showInventoryToggleStyles: ShowInventoryToggleStyles = {
    toggleClickable: {
        css: css`
            text-transform: inherit;
        `,
    },
    toggleIcon: {
        size: 22,
    },
    toggleTypography: {
        css: css`
            margin-left: 5px;
        `,
    },
};

export const ShowInventoryToggle = ({ extendedStyles }: OwnProps) => {
    const dispatch = useDispatch();
    const showInventory = useAppSelector(state => state.context.showInventory);
    const styles = useMergeStyles("showInventoryToggleStyles", showInventoryToggleStyles, extendedStyles);

    const clickShowInventoryToggleHandler = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        event.preventDefault();
        dispatch(setShowInventory({ showInventory: !showInventory }));
    };

    return (
        <Clickable {...styles.toggleClickable} onClick={clickShowInventoryToggleHandler}>
            <Icon {...styles.toggleIcon} src={showInventory ? EyeOff : Eye} />
            <Typography {...styles.toggleTypography}>{translate("Inventory")}</Typography>
        </Clickable>
    );
};

export default ShowInventoryToggle;
