import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
// import StepLabel from '@material-ui/core/StepLabel';
import Check from '@material-ui/icons/esm/Check';
import StepConnector from '@material-ui/core/StepConnector';
import StepLabel from './StepLabel';
const QontoConnector = withStyles({
    alternativeLabel: {
        top: 10,
        left: 'calc(-50% + 16px)',
        right: 'calc(50% + 16px)'
    },
    active: {
        '& $line': {
            borderColor: '#09A58C'
        }
    },
    completed: {
        '& $line': {
            borderColor: '#09A58C'
        }
    },
    line: {
        borderColor: '#eaeaf0',
        borderTopWidth: 3,
        borderRadius: 1
    }
})(StepConnector);
const useQontoStepIconStyles = makeStyles({
    root: {
        color: '#09A58C',
        display: 'flex',
        height: 22,
        alignItems: 'center'
    },
    active: {
        color: '#09A58C'
    },
    circle: {
        width: 16,
        height: 16,
        borderRadius: '50%',
        border: '2px solid currentColor'
    },
    completed: {
        color: '#09A58C',
        zIndex: 1,
        fontSize: 18
    },
    stepLabel: {
        display: 'none'
    },
    rootStepper: {
        background: 'blue'
    }
});
const QontoStepIcon = (props) => {
    const classes = useQontoStepIconStyles();
    const { active, completed } = props;
    return (React.createElement("div", { className: clsx(classes.root, {
            [classes.active]: active
        }) }, completed ? (React.createElement(Check, { className: classes.completed })) : (React.createElement("div", { className: classes.circle }))));
};
QontoStepIcon.propTypes = {
    /**
     * Whether this step is active.
     */
    active: PropTypes.bool,
    /**
     * Mark the step as completed. Is passed to child components.
     */
    completed: PropTypes.bool
};
const useStyles = makeStyles((theme) => ({
    root: {
        width: '100%'
    },
    button: {
        marginRight: theme.spacing(1)
    },
    instructions: {
        marginTop: theme.spacing(1),
        marginBottom: theme.spacing(1)
    },
    rootStep: {
        marginTop: 0
    }
}));
// function getSteps() {
//   return [
//     'Select campaign settings',
//     'Create an ad group',
//     'Create an ad',
//     'another',
//   ];
// }
export const AmbientStepper = ({ activeStep, steps, orientation }) => {
    const classes = useStyles();
    return (React.createElement("div", { className: classes.root }, React.createElement(Stepper, { style: { background: 'transparent', padding: 0 }, classes: { root: classes.rootStepper }, alternativeLabel: true, activeStep: activeStep, connector: React.createElement(QontoConnector, null), orietation: orientation }, steps.map((label) => (React.createElement(Step, { classes: { root: classes.rootStep }, key: label }, React.createElement(StepLabel, { className: classes.stepLabel, StepIconComponent: QontoStepIcon }, React.createElement("span", { style: { fontSize: 14 } }, label))))))));
};
//# sourceMappingURL=AmbientStepper.js.map