import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import clsx from 'clsx';

const styles = theme => ({
  thumb: {
    '&$open': {
      '& $offset': {
        transform: 'scale(1) translateY(-10px)',
      },
    },
  },
  open: {},
  offset: {
    zIndex: 1,
    ...theme.typography.body2,
    fontSize: theme.typography.pxToRem(12),
    lineHeight: 1.2,
    transition: theme.transitions.create(['transform'], {
      duration: theme.transitions.duration.shortest,
    }),
    top: -34,
    left: 'calc(-50% + -4px)',
    transformOrigin: 'bottom center',
    transform: 'scale(0)',
    position: 'absolute',
  },
  circle: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: 32,
    height: 32,
    borderRadius: '50% 50% 50% 0',
    backgroundColor: 'currentColor',
    transform: 'rotate(-45deg)',
  },
  label: {
    color: 'white',
    transform: 'rotate(45deg)',
  },
});

/**
 * @ignore - internal component.
 */
function ValueLabel(props) {
  const {
    children,
    classes,
    className,
    index,
    open,
    value,
    valueLabelDisplay,
    valueLabelFormat,
  } = props;

  if (valueLabelDisplay === 'off') {
    return children;
  }

  return React.cloneElement(
    children,
    {
      className: clsx(
        children.props.className,
        {
          [classes.open]: open || valueLabelDisplay === 'on',
        },
        classes.thumb,
      ),
    },
    <span className={clsx(classes.offset, className)}>
      <span className={classes.circle}>
        <span className={classes.label}>
          {typeof valueLabelFormat === 'function'
            ? valueLabelFormat(value, index)
            : valueLabelFormat}
        </span>
      </span>
    </span>,
  );
}

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