import * as React from 'react';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  text: {
    fontSize: 14,
    color: '#373c45'
  },
  li: {
    height: "20px",
    color: "#888888",
    fontFamily: "Lato-Regular",
    fontSize: "14px"
  },
  selected: {
    backgroundColor: "#e9f6ff !important",
    color: "#0290ff"
  },
})
class FontSizeInput extends React.Component {

  anchorEl: HTMLElement;
  constructor(props){
    super(props);
    this.state = {
      showColorPicker: false
    }
    this.fontSizeFlag = true;
    this.fontFamilyFlag = true;
  }

  onFontfamilyChange = (e) => {
    this.fontFamilyFlag = false;
    e.preventDefault();

    this.setState({
      fontfamilySelected: e.target.value
    })
    if(this.props.onFontfamilyChange)
      this.props.onFontfamilyChange(e);
  }

  onFontSizeChanged = (e) => {
    this.fontSizeFlag = false;
    e.preventDefault();

    this.setState({
      selectedFontSize: e.target.value
    })
    if(this.props.onFontSizeChanged)
      this.props.onFontSizeChanged(e)
  }

  render(){
    const {classes, fontData } = this.props;
    let sizeVal = this.state.selectedFontSize, 
      fontFamilyVal = this.state.fontfamilySelected;
    if(this.fontSizeFlag) {
      sizeVal = fontData.fontSizeValue;
    }
    if(this.fontFamilyFlag) {
      fontFamilyVal = fontData.fontFamilyValue
    }
    
    return(
      <>
        <Select
          style={{
            border: '1px solid #dbdbdb',
            backgroundColor: '#fafafa',
            borderRadius: '8px',
            fontSize: "14px",
            padding: "5px 22px",
            color: "#373c45",
            fontFamily: "Lato-Regular",
            width: "50%",
            marginRight: "15px"
          }}
          className='select_dropdown'
          onChange={this.onFontfamilyChange}
          // placeholder='Fontfamily'
          value={fontFamilyVal}
          classes={{select: classes.text, selectMenu: classes.li}}
        >
          <MenuItem className='select_li_hover'  classes={{root: classes.li, selected: classes.selected}} value={"serif"}>serif</MenuItem>
          <MenuItem className='select_li_hover'  classes={{root: classes.li, selected: classes.selected}} value={"sans-serif"}>sans-serif</MenuItem>
          <MenuItem className='select_li_hover'   classes={{root: classes.li, selected: classes.selected}} value={"monospace"}>monospace</MenuItem>
          <MenuItem className='select_li_hover'  classes={{root: classes.li, selected: classes.selected}} value={"cursive"}>cursive</MenuItem>
          <MenuItem className='select_li_hover'  classes={{root: classes.li, selected: classes.selected}} value={"fantasy"}>fantasy</MenuItem>
        </Select>
        <input 
          type="number" 
          style={{
            border: '1px solid #dbdbdb',
            backgroundColor: '#fafafa',
            borderRadius: '8px',
            fontSize: "14px",
            padding: "5px 22px",
            color: "#373c45",
            fontFamily: "Lato-Regular",
            width: "15%",
            height: "fit-content",
            lineHeight: '32px'
          }}
          value={sizeVal}
          placeholder='size(px)' 
          onChange={this.onFontSizeChanged} 
          className='textfield_input'
        />
      </>
    )
  }
}
FontSizeInput.propTypes = {
  classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(FontSizeInput)