import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import SetTheme from "./Theme/SetTheme.jsx";
import SetComment from "./Comment/SetComment.jsx";
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";

import { deepPurple } from "@material-ui/core/colors";

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    justifyContent: "flex-start",
    alignItems: "center",
    marginBottom: "20px",
    "& > *": {
      margin: theme.spacing(1)
    }
  },
  avatar: {
    width: theme.spacing(7),
    height: theme.spacing(7),
    color: theme.palette.getContrastText(deepPurple[500]),
    backgroundColor: deepPurple[500]
  },
  exportContainer: {
    display: "flex",
    justifyContent: "flex-start",
    alignItems: "center",
    "& > *": {
      marginRight: "10px",
      padding: "5px 0",
      border: "1px solid #333;",
      width: "72px",
      borderRadius: "4px",
      textAlign: "center",
      cursor: "pointer"
    }
  }
}));

const Login = (...params) => {
  const { isAuth } = params;
  const classes = useStyles();
  return (
    <div className={classes.root} style={{ justifyContent: "center" }}>
      <Avatar className={classes.avatar}>U</Avatar>
      {isAuth ? (
        <Button color="primary">log in Medium</Button>
      ) : (
        <Button color="secondary">sign out</Button>
      )}
    </div>
  );
};

const ExportTo = (...params) => {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <span>Export</span>
      <div className={classes.exportContainer}>
        <div>pdf</div>
        <div>word</div>
      </div>
    </div>
  );
};

const BatchExport = (...params) => {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <span>Batch Export</span>
      <Button
        variant="contained"
        color="primary"
        onClick={() => {
          window.location.href = "https://mediumx.jackofallcoding.tech/";
        }}
      >
        👉 Go pro
      </Button>
    </div>
  );
};

export default function Setup() {
  return (
    <div>
      <Login isAuth={false} />
      <SetTheme />
      <SetComment />
      <ExportTo />
      <BatchExport />
    </div>
  );
}