import React, { useState } from "react";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import Dialog from "@material-ui/core/Dialog";
import Divider from "@material-ui/core/Divider";
import { makeStyles } from "@material-ui/core/styles";
import ButtonSecondary from "../Input/ButtonSecondary";
import ButtonPrimary from "../Input/ButtonPrimary";
import IconButton from "@material-ui/core/IconButton";
import TextField from "@material-ui/core/TextField";
import CloseIcon from "@material-ui/icons/Close";
import { useSelector } from "react-redux";
import { useHistory } from "react-router-dom";

const useStyles = makeStyles((theme) => ({
  root: {
    textAlign: "center",
    "& .MuiPaper-root": {
      minWidth: "30%",
      backgroundColor: "#262626",
      color: "#bbbbbb",
    },
  },
  closeButton: {
    color: "#bbbbbb",
    position: "absolute",
    right: theme.spacing(1),
    top: theme.spacing(1),
  },
  textInput: {
    margin: theme.spacing(2),
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
    },
  },
  textInputFullWidth: {
    marginTop: theme.spacing(2),
    marginBottom: theme.spacing(2),
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
    },
    "$ .MuiFormHelperText-root": {
      color: "#bbbbbb",
    },
  },
  timePicker: {
    margin: theme.spacing(2),
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
    },
  },
  stepLabel: {
    "& .MuiStepLabel-label": {
      color: "#bbbbbb",
    },
    "& .MuiStepLabel-active": {
      color: "#bbbbbb",
    },
  },
}));

export default function Settings() {
  const history = useHistory();
  const style = useStyles();
  const data = useSelector((state) => state.data.userData);
  const initialState = {
    firstname: data.firstname,
    lastname: data.lastname,
    email: data.userEmail,
    NIP: data.billing.NIP,
    adress: data.billing.adress,
    companyName: data.billing.companyName,
  };
  const [state, setState] = useState(initialState);
  return (
    <Dialog aria-labelledby="settings-title" className={style.root} open={true}>
      <DialogTitle id="settings-title">Ustawienia konta</DialogTitle>
      <IconButton
        className={style.closeButton}
        onClick={() => {}}
        aria-label="close"
      >
        <CloseIcon />
      </IconButton>
      <Divider />
      <DialogContent>
        <TextField
          className={style.textInput}
          value={state.firstname}
          onChange={(event) =>
            setState({ ...state, firstname: event.target.value })
          }
          label="Imię"
          variant="outlined"
        />
        <TextField
          className={style.textInput}
          value={state.lastname}
          onChange={(event) =>
            setState({ ...state, lastname: event.target.value })
          }
          label="Nazwisko"
          variant="outlined"
        />
        <TextField
          className={style.textInput}
          value={state.email}
          onChange={(event) =>
            setState({ ...state, email: event.target.value })
          }
          label="Email"
          variant="outlined"
        />
        <TextField
          className={style.textInput}
          value={state.companyName}
          onChange={(event) =>
            setState({ ...state, companyName: event.target.value })
          }
          label="Nazwa firmy"
          variant="outlined"
        />
        <TextField
          className={style.textInput}
          value={state.NIP}
          onChange={(event) => setState({ ...state, NIP: event.target.value })}
          label="NIP"
          variant="outlined"
        />
        <TextField
          className={style.textInput}
          value={state.adress}
          onChange={(event) =>
            setState({ ...state, adress: event.target.value })
          }
          label="Adres firmy"
          variant="outlined"
        />
        <ButtonPrimary onClick={() => history.push("/")} text="Anuluj" />
        <ButtonSecondary text="Zapisz" />
      </DialogContent>
    </Dialog>
  );
}