import React from 'react';
import PropTypes from 'prop-types';
import AmountPrice from 'App/Shared/Containers/AmountPrice';
import ProductVariant from 'App/Shared/Containers/ProductVariant';
import ConfigurationModeSwitch from './ConfigurationModeSwitch';
import { makeStyles } from '@material-ui/core/styles';

export const useStyles = makeStyles(
    theme => {
        return {
            root: {
                bottom: 0,
                right: 0,
                position: 'absolute',
                [theme.breakpoints.down('xs')]: {
                    right: 0,
                    left: 0,
                },
                [theme.breakpoints.between('xs', 'sm')]: {
                    width: '100%',
                },
                [theme.breakpoints.between('sm', 'xl')]: {
                    width: '320px',
                },
            },
        };
    },
    { name: 'AmountPrice' }
);

export const AmountPriceContainer = ({ AmountPriceContainer, showDesigner, ...props }) => {
    const classes = useStyles({ showDesigner });
    const wrapperRoot = showDesigner ? '' : classes.root;
    return <AmountPriceContainer wrapperClass={wrapperRoot} {...props} />;
};

AmountPriceContainer.defaultProps = {
    AmountPriceContainer: AmountPrice,
    ProductVariantComponent: ProductVariant,
    ConfigurationModeSwitchComponent: ConfigurationModeSwitch,
    showConfigurationModeSwitch: false,
    showDesigner: false,
};

AmountPriceContainer.propTypes = {
    AmountPriceContainer: PropTypes.elementType,
    ProductVariantComponent: PropTypes.elementType,
    ConfigurationModeSwitchComponent: PropTypes.elementType,
    showConfigurationModeSwitch: PropTypes.bool,
    showDesigner: PropTypes.bool,
};

export default AmountPriceContainer;
