import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import { t } from 'Framework/i18n';

import customClassName from 'App/Utils/customClassName';
import Stepper from '../Stepper';
import VariantChooser from '../VariantChooser';
import ToolbarList from '../ToolbarList';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles(
    theme => ({
        root: {
            flexGrow: 1,
        },
        grow: {
            flexGrow: 1,
        },
        headerRoot: {
            overflow: 'hidden',
        },
        toolbarHeaderWrapper: {
            minHeight: 64,
            padding: '0 20px',
            [theme.breakpoints.down('xs')]: {
                padding: '0 0 0 20px',
            },
        },
        hiddenEmailShareIframe: {
            visibility: 'hidden',
            position: 'absolute',
        },
        itemIdentifierLabel: {
            fontSize: 15,
            [theme.breakpoints.down('sm')]: {
                fontSize: 12,
            },
        },
        itemIdentifier: {
            fontWeight: 'bold',
            fontSize: 15,
            marginLeft: theme.spacing(1),
            [theme.breakpoints.down('sm')]: {
                fontSize: 12,
            },
        },
        itemIdentifierContainer: {
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            display: 'flex',
            flexDirection: 'row',
            marginLeft: theme.spacing(2),
            [theme.breakpoints.down('xs')]: {
                display: 'none',
            },
        },
    }),
    {
        name: 'Header',
    }
);

const Header = props => {
    const classes = useStyles(props);
    const {
        tools,
        steps,
        variants,
        selectedVariantIdentifier,
        title,
        VariantChooserComponent,
        selectedVariant,
        showItemIdentifier,
    } = props;

    const handleVariantChange = e => {
        const { switchSelectedAmount, selectedVariantIdentifier } = props;
        switchSelectedAmount(selectedVariantIdentifier, e.target.value);
    };

    return (
        <div className={classes.root}>
            <AppBar
                position="static"
                color="default"
                className={clsx(classes.headerRoot, customClassName('header'))}
            >
                <Toolbar classes={{ regular: classes.toolbarHeaderWrapper }}>
                    <VariantChooserComponent
                        variants={variants}
                        value={selectedVariant || ''}
                        title={title}
                        handleChange={handleVariantChange}
                    />
                    {showItemIdentifier && (
                        <div className={classes.itemIdentifierContainer}>
                            <Typography
                                component="div"
                                className={classes.itemIdentifierLabel}
                                variant="body2"
                            >
                                {t('headerMenu.item_identifier_label') !== 'headerMenu.item_identifier_label'
                                    ? t('headerMenu.item_identifier_label')
                                    : ''}
                            </Typography>
                            <Typography component="div" className={classes.itemIdentifier} variant="body2">
                                {selectedVariantIdentifier}
                            </Typography>
                        </div>
                    )}
                    <div className={classes.grow}>{steps && <Stepper tabs={steps} />}</div>
                    <ToolbarList tools={tools} />
                </Toolbar>
            </AppBar>
        </div>
    );
};

Header.propTypes = {
    tools: PropTypes.array,
    steps: PropTypes.array,
    variants: PropTypes.array,
    selectedVariant: PropTypes.string,
    selectedVariantIdentifier: PropTypes.string,
    title: PropTypes.string,
    switchSelectedAmount: PropTypes.func,
    VariantChooserComponent: PropTypes.elementType,
    showItemIdentifier: PropTypes.bool,
};

Header.defaultProps = {
    variants: [],
    VariantChooserComponent: VariantChooser,
};

export default Header;
