import * as React from 'react';
import PropTypes from 'prop-types';
import withWidth from '@material-ui/core/withWidth';

/**
 * @deprecated use useMediaQuery instead
 */
export const Responsive = ({
    xsmall,
    small,
    medium,
    large,
    width,
    ...rest
}: ResponsiveProps): JSX.Element => {
    let element;
    switch (width) {
        case 'xs':
            element =
                typeof xsmall !== 'undefined'
                    ? xsmall
                    : typeof small !== 'undefined'
                    ? small
                    : typeof medium !== 'undefined'
                    ? medium
                    : large;
            break;
        case 'sm':
            element =
                typeof small !== 'undefined'
                    ? small
                    : typeof medium !== 'undefined'
                    ? medium
                    : large;
            break;
        case 'md':
            element =
                typeof medium !== 'undefined'
                    ? medium
                    : typeof large !== 'undefined'
                    ? large
                    : small;
            break;
        case 'lg':
        case 'xl':
            element =
                typeof large !== 'undefined'
                    ? large
                    : typeof medium !== 'undefined'
                    ? medium
                    : small;
            break;
        default:
            throw new Error(`Unknown width ${width}`);
    }

    return element ? React.cloneElement(element, rest) : null;
};

export interface ResponsiveProps {
    xsmall?: JSX.Element;
    small?: JSX.Element;
    medium?: JSX.Element;
    large?: JSX.Element;
    width?: string;
}

Responsive.propTypes = {
    xsmall: PropTypes.element,
    small: PropTypes.element,
    medium: PropTypes.element,
    large: PropTypes.element,
    width: PropTypes.string,
};

export default withWidth({ initialWidth: 'xs' })(Responsive);