import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
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 ButtonSecondary from "../Input/ButtonSecondary";
import IconButton from "@material-ui/core/IconButton";
import TextField from "@material-ui/core/TextField";
import CloseIcon from "@material-ui/icons/Close";
import { useSelector, useDispatch } from "react-redux";
import { hideNewRestaurantDialog } from "../../actions/toggles";
import Stepper from "@material-ui/core/Stepper";
import Step from "@material-ui/core/Step";
import StepLabel from "@material-ui/core/StepLabel";
import Paper from "@material-ui/core/Paper";
import Autocomplete from "@material-ui/lab/Autocomplete";
import InputAdornment from "@material-ui/core/InputAdornment";
import ImageUpload from "../Input/ImageUpload";
import validator from "validator";
// ICONS
import FastfoodIcon from "@material-ui/icons/Fastfood";
import LocationCityIcon from "@material-ui/icons/LocationCity";
import PhoneIcon from "@material-ui/icons/Phone";
import FacebookIcon from "@material-ui/icons/Facebook";
import TwitterIcon from "@material-ui/icons/Twitter";
import LanguageIcon from "@material-ui/icons/Language";
import ButtonPrimary from "../Input/ButtonPrimary";

// SETUP

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",
    },
  },
  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 NewRestaurant() {
  const initialState = {
    name: "",
    city: "",
    adress: "",
    hoursFrom: "07:00",
    hoursTo: "23:00",
    description: "",
    tags: [],
    phone: "",
    facebook: "",
    twitter: "",
    www: "",
    nameError: false,
    cityError: false,
    adressError: false,
  };
  const steps = ["Informacje", "Zdjęcie", "Lokalizacja"];
  const [state, setState] = useState(initialState);
  const [activeStep, setActiveStep] = React.useState(0);
  const styles = useStyles();
  const dialogOpen = useSelector((state) => state.data.dialogs.newRestaurant);
  const dispatch = useDispatch();
  const availableTags = [
    "Płatność kartą",
    "Lubimy zwierzaki",
    "Bezglutenowe",
    "Wegańskie",
    "Wegetariańskie",
    "Podajemy alkohol",
    "Dowozimy",
  ];

  // HANDLERS

  const handleNextButton = () => {
    if (activeStep === 0) {
      if (validateForm()) {
        setActiveStep(1);
      }
    }
  };

  const handlePreviousButton = () => {
    setActiveStep(activeStep - 1);
    console.log(activeStep);
  };

  const validateForm = () => {
    const validation = {
      nameValid: validator.isLength(state.name, { min: 1, max: 40 }),
      cityValid: validator.isLength(state.city, { min: 1, max: 40 }),
      adressValid: validator.isLength(state.name, { min: 1, max: 40 }),
    };
    setState({
      ...state,
      nameError: !validation.nameValid,
      cityError: !validation.cityValid,
      adressError: !validation.adressValid,
    });

    return (
      validation.nameValid && validation.cityValid && validation.adressValid
    );
  };

  // COMPONENTS

  return (
    <div>
      <Dialog
        className={styles.root}
        open={dialogOpen}
        aria-labelledby="newRestaurant-title"
      >
        <DialogTitle id="newRestaurant-title">Dodaj Lokal</DialogTitle>
        <IconButton
          className={styles.closeButton}
          onClick={() => dispatch(hideNewRestaurantDialog())}
          aria-label="close"
        >
          <CloseIcon />
        </IconButton>
        <Divider />
        <DialogContent>
          <Stepper activeStep={activeStep} alternativeLabel>
            {steps.map((label) => (
              <Step key={label}>
                <StepLabel className={styles.stepLabel}>{label}</StepLabel>
              </Step>
            ))}
          </Stepper>

          {activeStep === 0 && (
            <Paper variant="outlined">
              <div className="newRestaurant-content-fullwidth">
                <TextField
                  className={styles.textInputFullWidth}
                  fullWidth
                  required
                  error={state.nameError}
                  value={state.name}
                  label="Nazwa lokalu"
                  variant="outlined"
                  onChange={(event) =>
                    setState({ ...state, name: event.target.value })
                  }
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <FastfoodIcon color="primary" />
                      </InputAdornment>
                    ),
                  }}
                />
              </div>
              <div className="newRestaurant-content">
                <TextField
                  className={styles.textInput}
                  required
                  label="Miasto"
                  error={state.cityError}
                  value={state.city}
                  variant="outlined"
                  onChange={(event) =>
                    setState({ ...state, city: event.target.value })
                  }
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <LocationCityIcon color="primary" />
                      </InputAdornment>
                    ),
                  }}
                />
                <TextField
                  className={styles.textInput}
                  required
                  label="Adres"
                  variant="outlined"
                  error={state.adressError}
                  value={state.adress}
                  onChange={(event) =>
                    setState({ ...state, adress: event.target.value })
                  }
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <LocationCityIcon color="primary" />
                      </InputAdornment>
                    ),
                  }}
                />
                <TextField
                  label="Otwarcie"
                  type="time"
                  onChange={(event) =>
                    setState({ ...state, hoursFrom: event.target.value })
                  }
                  variant="outlined"
                  value={state.hoursFrom}
                  className={styles.timePicker}
                  InputLabelProps={{
                    shrink: true,
                  }}
                  inputProps={{
                    step: 300, // 5 min
                  }}
                />
                <TextField
                  label="Zamknięcie"
                  type="time"
                  onChange={(event) =>
                    setState({ ...state, hoursTo: event.target.value })
                  }
                  variant="outlined"
                  value={state.hoursTo}
                  className={styles.timePicker}
                  InputLabelProps={{
                    shrink: true,
                  }}
                  inputProps={{
                    step: 300, // 5 min
                  }}
                />
                <div className="newRestaurant-content-fullwidth">
                  <TextField
                    className={styles.textInputFullWidth}
                    fullWidth
                    label="Opis"
                    value={state.description}
                    onChange={(event) =>
                      setState({ ...state, description: event.target.value })
                    }
                    multiline
                    rows={3}
                    variant="outlined"
                  />
                  <Autocomplete
                    multiple
                    options={availableTags}
                    value={state.tags}
                    onChange={(event, values) =>
                      setState({ ...state, tags: values })
                    }
                    renderInput={(params) => (
                      <TextField
                        {...params}
                        className={styles.textInputFullWidth}
                        variant="outlined"
                        label="Tagi"
                        placeholder="Dodaj tagi"
                      />
                    )}
                  />
                </div>
                <TextField
                  className={styles.textInput}
                  label="Telefon"
                  type="tel"
                  variant="outlined"
                  value={state.phone}
                  onChange={(event) =>
                    setState({ ...state, phone: event.target.value })
                  }
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <PhoneIcon color="primary" />
                      </InputAdornment>
                    ),
                  }}
                />
                <TextField
                  className={styles.textInput}
                  label="Facebook"
                  variant="outlined"
                  value={state.facebook}
                  onChange={(event) =>
                    setState({ ...state, facebook: event.target.value })
                  }
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <FacebookIcon color="primary" />
                      </InputAdornment>
                    ),
                  }}
                />
                <TextField
                  className={styles.textInput}
                  label="Twitter"
                  variant="outlined"
                  value={state.twitter}
                  onChange={(event) =>
                    setState({ ...state, twitter: event.target.value })
                  }
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <TwitterIcon color="primary" />
                      </InputAdornment>
                    ),
                  }}
                />
                <TextField
                  className={styles.textInput}
                  label="www"
                  variant="outlined"
                  value={state.www}
                  onChange={(event) =>
                    setState({ ...state, www: event.target.value })
                  }
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <LanguageIcon color="primary" />
                      </InputAdornment>
                    ),
                  }}
                />
              </div>
            </Paper>
          )}
          {activeStep === 1 && (
            <Paper>
              <h4>Dodaj zdjęcie lokalu.</h4>
              <ImageUpload />
            </Paper>
          )}
          {activeStep !== 0 && (
            <ButtonPrimary onClick={handlePreviousButton} text="Cofnij" />
          )}
          <ButtonSecondary
            onClick={handleNextButton}
            text={activeStep === 2 ? "Dodaj lokal" : "Dalej"}
          />
        </DialogContent>
      </Dialog>
    </div>
  );
}