import React from "react";
import TextField from "@material-ui/core/TextField";
import Checkbox from "@material-ui/core/Checkbox";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  timePicker: {
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
    },
  },
  checkbox: {
    marginLeft: theme.spacing(1),
    "& .MuiFormControlLabel-label": {
      color: "#979797",
      fontSize: "14px",
    },
  },
}));

export default function InputWorkingHoursSingle(props) {
  const handleChangeValue = (event) => {
    props.changeValue(event.target.value);
  };
  const handleCheckbox = () => {
    if (!props.nieczynne) {
      props.changeValue("");
    } else {
      props.changeValue("8:00 - 22:00");
    }
  };

  const classes = useStyles();
  return (
    <div className="workingHours-day">
      <h5>{props.day}</h5>
      <TextField
        value={props.hours}
        variant="outlined"
        onChange={handleChangeValue}
        className={classes.timePicker}
        margin="dense"
      />
      <FormControlLabel
        className={classes.checkbox}
        control={
          <Checkbox
            onClick={handleCheckbox}
            checked={props.nieczynne}
            name="nieczynne"
          />
        }
        label="Zamknięte"
      />
    </div>
  );
}