import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import LinearProgress from '@material-ui/core/LinearProgress';
import CircularProgress from '@material-ui/core/CircularProgress';
import color from '@edma/design-tokens/tokens/js/color';

const useStyles = makeStyles (theme => ({
  '@global': {
    '.MuiLinearProgress-colorPrimary': {
      backgroundColor: theme.palette.type === 'light' ? color.g300 : color.g400,
    },
    '.progress-success': {
      width: 'calc(100% - 40px)',
    },
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
  },
  leftAlign: {
    textAlign: 'left',
    position: 'relative',
  },
  progressSuccess: {
    width: 'calc(100% - 40px)',
  },
  tick: props => ({
    width: '40px',
    height: '40px',
    display: 'inline-block',
    borderRadius: '50%',
    border: props.value === 100 ? `2px solid ${color.b300}` : (theme.palette.type === 'light' ? `2px solid ${color.g300}` : `2px solid ${color.g400}`),
    position: 'relative',
    left: 0,
    top: '-22px',
    float: 'right',

    '& > svg': {
      position: 'absolute',
      left: '8px',
      top: '8px',
    },

    '& > svg g': {
      stroke: props.value === 100 ? color.b300 : (theme.palette.type === 'light' ? color.g300 : color.g400),
    },
  }),
}));

export default function ProgressBar(props) {
  const styleProps = {value: props.value};
  const custom = useStyles(styleProps);
  let steps;
  let icon;
  let type;

  if (props.step && props.totalsteps) {
    steps = <strong>Step {props.step} of {props.totalsteps}: </strong>;
  }

  if (props.type === 'linear' && props.successicon) {
    icon = <div className={custom.tick}>
      <svg width="20px" height="20px" viewBox="0 0 14 14" version="1.1">
        <g id="Style-Exploration" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
          <g id="Desktop-HD-Copy-34" transform="translate(-287.000000, -414.000000)" strokeWidth="3">
            <g id="Group-7" transform="translate(232.000000, 264.000000)">
              <g id="Group-12" transform="translate(50.000000, 0.000000)">
                <g id="Group-16" transform="translate(0.000000, 145.000000)">
                  <polyline id="Path-8" points="6.54589844 13.5722656 11.1269531 17.1328125 17.3144531 6.56933594"></polyline>
                </g>
              </g>
            </g>
          </g>
        </g>
      </svg>
    </div>;

    type = <Box className={custom.leftAlign} >
      <LinearProgress className="progress-success" variant={props.variant} value={props.value} color={props.color} /> {icon}
      <Typography>
        {steps}{props.label}
      </Typography>
    </Box>;
  }

  if (props.type === 'linear' && !props.successicon) {
    type = <Box className={custom.leftAlign} >
      <LinearProgress className="progress" variant={props.variant} value={props.value} color={props.color} /> {icon}
      <Typography>
        {steps}{props.label}
      </Typography>
    </Box>;
  }

  if (props.type === 'circular') {
    type = <Box className={custom.leftAlign} >
      <CircularProgress className="progress" variant={props.variant} value={props.value} color={props.color} />
      <div className="circular-container">
        <Typography>
          {props.label}
        </Typography>
      </div>
    </Box>;
  }

  return (
    <div>
      <main className={custom.content}>
        {type}
      </main>
    </div>
  );
}
