import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import ListItem from '@material-ui/core/ListItem';
import List from '@material-ui/core/List';
import ListItemText from '@material-ui/core/ListItemText';
import Grid from '@material-ui/core/Grid';
import Checkbox from '@material-ui/core/Checkbox';
import Typography from '@material-ui/core/Typography';
import isFunction from 'lodash/isFunction';
import InformationTag from '../InformationTag/InformationTag';
import { translationExists, t } from '../../../../Framework/i18n';
import clsx from 'clsx';

const styles = theme => ({
    MuiListRoot: {
        paddingTop: 0,
        paddingRight: 0,
        paddingLeft: 0,
    },
    MuiCheckboxRoot: {
        //margin: '0 0 0 12px',
        padding: 0,
        [theme.breakpoints.down('xs')]: {
            margin: '0',
        },
    },
    MuiTypographyRoot: {
        lineHeight: 1.8,
    },
    MuiTypographyNoWrap: {
        whiteSpace: 'nowrap',
        minWidth: 50,
        fontSize: 15,
        padding: '0 16px',
    },
    gutterBottom: {
        marginBottom: 0,
    },
    itemTitle: {
        textOverflow: 'ellipsis',
        overflow: 'hidden',
    },
    listItemPrimary: {
        padding: '0 2px',
        [theme.breakpoints.down('xs')]: {
            padding: 0,
        },
        '& span': {
            fontSize: 15,
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            minWidth: '160px',
            display: 'block',
            [theme.breakpoints.down('md')]: {
                minWidth: 140,
            },
            [theme.breakpoints.down('xs')]: {
                minWidth: 50,
            },
        },
    },
    selectableLabel: {
        padding: '0 10px',
        [theme.breakpoints.down('xs')]: {
            padding: 0,
        },
    },
    infoBtn: {
        flex: '100%',
        [theme.breakpoints.down('xs')]: {
            flex: 0,
            justifyContent: 'flex-end',
            display: 'flex',
        },
    },
    container: {
        marginBottom: 'auto',
    },
});

class PriceList extends React.Component {
    static propTypes = {
        list: PropTypes.array,
        productTitle: PropTypes.string,
        classes: PropTypes.object,
        amount: PropTypes.number,
        totalPrice: PropTypes.string,
        taxNote: PropTypes.string,
        hidePrices: PropTypes.bool,
        showReceiveOfferForm: PropTypes.bool,
        onSelectableChanged: PropTypes.func,
    };

    constructor(props) {
        super(props);
    }

    handleToggle = element => () => {
        if (isFunction(this.props.onSelectableChanged)) {
            this.props.onSelectableChanged(element.key, !element.selected);
        }
    };

    render() {
        const { list, productTitle, classes, amount, hidePrices } = this.props;
        return (
            <Grid container spacing={2} classes={{ root: classes.container }}>
                <Grid item xs={12}>
                    {amount > 0 && list && list.length <= 0 && (
                        <List dense={false}>
                            <ListItem
                                classes={{
                                    root: classes.MuiListRoot,
                                }}
                            >
                                <Typography
                                    variant="body2"
                                    gutterBottom
                                    classes={{
                                        root: classes.MuiTypographyNoWrap,
                                        gutterBottom: classes.gutterBottom,
                                    }}
                                >
                                    {amount} {t('amountPrice.pieces')}
                                </Typography>

                                <ListItemText className={classes.listItemPrimary} primary={productTitle} />
                            </ListItem>
                        </List>
                    )}
                    {list && list.length > 0 && (
                        <List dense={false}>
                            {list.map(element => (
                                <ListItem
                                    key={element.key}
                                    classes={{
                                        root: classes.MuiListRoot,
                                    }}
                                >
                                    {element.selectable && (
                                        <Checkbox
                                            checked={element.selected}
                                            color="primary"
                                            tabIndex={-1}
                                            disableRipple
                                            onChange={this.handleToggle(element)}
                                            classes={{
                                                root: classes.MuiCheckboxRoot,
                                            }}
                                        />
                                    )}
                                    <ListItemText
                                        className={clsx(
                                            list[0].key === element.key && classes.itemTitle,
                                            list[0].key !== element.key && classes.listItemPrimary,
                                            element.selectable && classes.selectableLabel
                                        )}
                                        primary={element.label}
                                    />
                                    {element.key === 'setup_cost' &&
                                        translationExists('setUpCostInformation') && (
                                            <div className={classes.infoBtn}>
                                                <InformationTag infoText={t('setUpCostInformation')} />
                                            </div>
                                        )}
                                    {element.key === 'production_cost' &&
                                        translationExists('productionCostInformation') && (
                                            <div className={classes.infoBtn}>
                                                <InformationTag infoText={t('productionCostInformation')} />
                                            </div>
                                        )}
                                    {!hidePrices && (
                                        <Typography
                                            variant="body2"
                                            gutterBottom
                                            align="right"
                                            classes={{
                                                root: classes.MuiTypographyNoWrap,
                                                gutterBottom: classes.gutterBottom,
                                            }}
                                        >
                                            {element.selectable && !element.selected ? '' : element.price}
                                        </Typography>
                                    )}
                                </ListItem>
                            ))}
                        </List>
                    )}
                </Grid>
            </Grid>
        );
    }
}

export default withStyles(styles, { name: 'PriceList' })(PriceList);
