import { makeStyles } from '@material-ui/core/styles'
import classnames from 'classnames'
import React from 'react'

import typographyStyles from 'src/components/typography/styles'
import {
  primaryColor,
  spring2,
  spring3,
  disabledColor
} from 'src/styling/variables'

const { label1 } = typographyStyles

const styles = {
  wrapper: {
    height: 26,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    position: 'relative',
    overflow: 'hidden'
  },
  button: {
    outline: 'none',
    extend: label1,
    border: 'none',
    cursor: 'pointer',
    backgroundColor: 'transparent',
    color: primaryColor,
    zIndex: 2
  },
  lowerBound: {
    left: '50%'
  },
  upperBound: {
    right: '50%'
  },
  selected: {
    width: 26,
    height: 26,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: spring2,
    borderRadius: '50%',
    position: 'absolute',
    zIndex: 1
  },
  between: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    zIndex: 0,
    backgroundColor: spring3
  },
  disabled: {
    color: disabledColor,
    cursor: 'default'
  }
}

const useStyles = makeStyles(styles)

const Tile = ({
  isLowerBound,
  isUpperBound,
  isBetween,
  isDisabled,
  children,
  ...props
}) => {
  const classes = useStyles()
  const selected = isLowerBound || isUpperBound

  const rangeClasses = {
    [classes.between]: isBetween && !(isLowerBound && isUpperBound),
    [classes.lowerBound]: isLowerBound && !isUpperBound,
    [classes.upperBound]: isUpperBound && !isLowerBound
  }

  const buttonWrapperClasses = {
    [classes.wrapper]: true,
    [classes.selected]: selected
  }

  const buttonClasses = {
    [classes.button]: true,
    [classes.disabled]: isDisabled
  }

  return (
    <div className={classes.wrapper}>
      <div className={classnames(rangeClasses)} />
      <div className={classnames(buttonWrapperClasses)}>
        <button className={classnames(buttonClasses)}>{children}</button>
      </div>
    </div>
  )
}

export default Tile
