import React, { useState } from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import withWidth from '@material-ui/core/withWidth';
import { T } from 'Framework/i18n';
import Carousel from 'Framework/Components/Carousel';
import customClassName from 'App/Utils/customClassName';
import ProductPart from '../ProductPart';

const useStyles = makeStyles(
    theme => {
        return {
            root: {
                zIndex: 1,
                '&.horizontal': {
                    height: 'auto',
                    // the available width (see container) is reduced by the width of the two arrows
                    width: 'calc(100% - 72px)',
                    [theme.breakpoints.down('xs')]: {
                        width: 'calc(100% - 32px)',
                        padding: '0 16px',
                    },
                },
                '&.vertical': {
                    float: 'left',
                    height: '100%',
                    width: 'auto',
                    marginLeft: theme.creator.productPartsList.marginLeft,
                    paddingTop: theme.creator.productPartsList.paddingTop,
                    [theme.breakpoints.down('md')]: {
                        paddingTop: 35,
                    },
                },
            },
        };
    },
    { name: 'ProductPartsList' }
);

const ProductPartsList = ({
    displaySwitchedOptions,
    onSelect,
    optionclassifications,
    selectedoptionclassification,
    showStartHere,
    vertical,
    ProductPartComponent,
    CallToActionComponent,
    width,
    optionListVisible,
    onCloseSelectedPart,
}) => {
    const classes = useStyles();
    const [anchorRef, setAnchorRef] = useState(null);

    return (
        <>
            <Carousel className={clsx(classes.root, customClassName('components'))} vertical={vertical}>
                {optionclassifications.map((option, index) => {
                    const refProps = {
                        ...(index === 0 && { setAnchorRef }),
                    };

                    return (
                        <ProductPartComponent
                            key={'optionclassificationitem' + option.identifier}
                            displaySwitchedOptions={displaySwitchedOptions}
                            onSelect={onSelect}
                            optionclassification={option}
                            selectedOption={selectedoptionclassification}
                            verticalMode={vertical}
                            optionListVisible={optionListVisible}
                            onCloseSelected={onCloseSelectedPart}
                            {...refProps}
                        />
                    );
                })}
            </Carousel>
            {showStartHere && width !== 'xs' && (
                <CallToActionComponent
                    offsetDirection={vertical ? 'right' : 'top'}
                    anchorRef={anchorRef}
                    perpendicularOffset={vertical ? -15 : 0}
                    offset={15}
                    label={T('creator.startHere')}
                    className={customClassName('begin-here-creator')}
                />
            )}
        </>
    );
};

ProductPartsList.defaultProps = {
    onSelect: () => {},
    optionclassifications: [],
    selectedoptionclassification: {},
    showStartHere: false,
    vertical: true,
    ProductPartComponent: ProductPart,
    onCloseSelectedPart: () => {},
};

ProductPartsList.propTypes = {
    onSelect: PropTypes.func,
    optionclassifications: PropTypes.array,
    selectedoptionclassification: PropTypes.object,
    showStartHere: PropTypes.bool,
    vertical: PropTypes.bool,
    displaySwitchedOptions: PropTypes.bool,
    ProductPartComponent: PropTypes.elementType,
    CallToActionComponent: PropTypes.elementType,
    width: PropTypes.string,
    optionListVisible: PropTypes.bool,
    onCloseSelectedPart: PropTypes.func,
};

export default withWidth({ initialWidth: 'lg' })(ProductPartsList);
