import useAppSelector from "@insite/client-framework/Common/Hooks/useAppSelector";
import setShowPricing from "@insite/client-framework/Store/Context/Handlers/SetShowPricing";
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?: ShowPricingToggleStyles;
}

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

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

export const ShowPricingToggle = ({ extendedStyles }: OwnProps) => {
    const dispatch = useDispatch();
    const showPricing = useAppSelector(state => state.context.showPricing);
    const styles = useMergeStyles("showPricingToggleStyles", showPricingToggleStyles, extendedStyles);

    const clickShowPricingToggleHandler = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        event.preventDefault();
        dispatch(setShowPricing({ showPricing: !showPricing }));
    };

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

export default ShowPricingToggle;
