import React, { PureComponent } from 'react';
import { withStyles } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';
import TextInput from '../TextInput/TextInput';
import green from '../../../style/theme/colors/green';
import grey from '../../../style/theme/colors/grey';

const styles = theme => ({
  toggler: {
    position: 'absolute',
    right: theme.spacing.unit,
    top: theme.spacing.unit * 2.5,
    cursor: 'pointer',
    color: grey[700],
    '&:hover': {
      color: green[200]
    }
  },
});

class PasswordInput extends PureComponent {
  state= {
    isRevealed: false
  }

  handlePasswordToggle = () => {
    this.setState(state => ({
      isRevealed: !state.isRevealed
    }));
  }

  render() {
    const { classes, ...input } = this.props;
    const { isRevealed } = this.state;
    return (
      <TextInput
        {...input}
        type={isRevealed ? 'text' : 'password'}
      >
        <span
          className={classes.toggler}
          aria-hidden="true"
          onClick={this.handlePasswordToggle}
        >
          {isRevealed ? (
            // change to labelSmall
            <Typography
              variant="body2"
              color="inherit"
            >
        hide
            </Typography>
          ) : (
            <Typography
              variant="body2"
              color="inherit"
            >
        show
            </Typography>
          )}
        </span>
      </TextInput>
    );
  }
}

export default withStyles(styles)(PasswordInput);