import React, { useEffect } from "react";
import { makeStyles } from "@material-ui/styles";
import { useTheme } from "@material-ui/core/styles";

import Tooltip from "@material-ui/core/Tooltip";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
import { useAlert } from "react-alert";
import IconButton from "@material-ui/core/IconButton";
import ExpandLessIcon from "@material-ui/icons/ExpandLess";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import SaveIcon from "@material-ui/icons/Save";

const useStyles = makeStyles({
  notchedOutline: {
    borderColor: "#f85a3e !important",
  },
});

const defaultImage =
  "data:image/png;base64, ";

const OrgHeader = (props) => {
  const {
    userdata,
    selectedOrganization,
    setSelectedOrganization,
    globalUrl,
    isCloud,
  } = props;

  const theme = useTheme();
  const alert = useAlert();
  const classes = useStyles();

  var upload = "";
  const defaultBranch = "master";
  const [orgName, setOrgName] = React.useState(selectedOrganization.name);
  const [orgDescription, setOrgDescription] = React.useState(
    selectedOrganization.description
  );
  const [appDownloadUrl, setAppDownloadUrl] = React.useState(
    selectedOrganization.defaults === undefined
      ? "https://github.com/frikky/shuffle-apps"
      : selectedOrganization.defaults.app_download_repo === undefined ||
        selectedOrganization.defaults.app_download_repo.length === 0
      ? "https://github.com/frikky/shuffle-apps"
      : selectedOrganization.defaults.app_download_repo
  );
  const [appDownloadBranch, setAppDownloadBranch] = React.useState(
    selectedOrganization.defaults === undefined
      ? defaultBranch
      : selectedOrganization.defaults.app_download_branch === undefined ||
        selectedOrganization.defaults.app_download_branch.length === 0
      ? defaultBranch
      : selectedOrganization.defaults.app_download_branch
  );
  const [workflowDownloadUrl, setWorkflowDownloadUrl] = React.useState(
    selectedOrganization.defaults === undefined
      ? "https://github.com/frikky/shuffle-apps"
      : selectedOrganization.defaults.workflow_download_repo === undefined ||
        selectedOrganization.defaults.workflow_download_repo.length === 0
      ? "https://github.com/frikky/shuffle-workflows"
      : selectedOrganization.defaults.workflow_download_repo
  );
  const [workflowDownloadBranch, setWorkflowDownloadBranch] = React.useState(
    selectedOrganization.defaults === undefined
      ? defaultBranch
      : selectedOrganization.defaults.workflow_download_branch === undefined ||
        selectedOrganization.defaults.workflow_download_branch.length === 0
      ? defaultBranch
      : selectedOrganization.defaults.workflow_download_branch
  );
  const [ssoEntrypoint, setSsoEntrypoint] = React.useState(
    selectedOrganization.sso_config === undefined
      ? ""
      : selectedOrganization.sso_config.sso_entrypoint === undefined ||
        selectedOrganization.sso_config.sso_entrypoint.length === 0
      ? ""
      : selectedOrganization.sso_config.sso_entrypoint
  );
  const [ssoCertificate, setSsoCertificate] = React.useState(
    selectedOrganization.sso_config === undefined
      ? ""
      : selectedOrganization.sso_config.sso_certificate === undefined ||
        selectedOrganization.sso_config.sso_certificate.length === 0
      ? ""
      : selectedOrganization.sso_config.sso_certificate
  );
  const [notificationWorkflow, setNotificationWorkflow] = React.useState(
    selectedOrganization.defaults === undefined
      ? ""
      : selectedOrganization.defaults.notification_workflow === undefined ||
        selectedOrganization.defaults.notification_workflow.length === 0
      ? ""
      : selectedOrganization.defaults.notification_workflow
  );

  const [documentationReference, setDocumentationReference] = React.useState(
    selectedOrganization.defaults === undefined
      ? ""
      : selectedOrganization.defaults.documentation_reference === undefined ||
        selectedOrganization.defaults.documentation_reference.length === 0
      ? ""
      : selectedOrganization.defaults.documentation_reference
  );
  const [openidClientId, setOpenidClientId] = React.useState(
    selectedOrganization.sso_config === undefined
      ? ""
      : selectedOrganization.sso_config.client_id === undefined ||
        selectedOrganization.sso_config.client_id.length === 0
      ? ""
      : selectedOrganization.sso_config.client_id
  );
  const [openidClientSecret, setOpenidClientSecret] = React.useState(
    selectedOrganization.sso_config === undefined
      ? ""
      : selectedOrganization.sso_config.client_secret === undefined ||
        selectedOrganization.sso_config.client_secret.length === 0
      ? ""
      : selectedOrganization.sso_config.client_secret
  );
  const [openidAuthorization, setOpenidAuthorization] = React.useState(
    selectedOrganization.sso_config === undefined
      ? ""
      : selectedOrganization.sso_config.openid_authorization === undefined ||
        selectedOrganization.sso_config.openid_authorization.length === 0
      ? ""
      : selectedOrganization.sso_config.openid_authorization
  );
  const [openidToken, setOpenidToken] = React.useState(
    selectedOrganization.sso_config === undefined
      ? ""
      : selectedOrganization.sso_config.openid_token === undefined ||
        selectedOrganization.sso_config.openid_token.length === 0
      ? ""
      : selectedOrganization.sso_config.openid_token
	)

  const [file, setFile] = React.useState("");
  const [fileBase64, setFileBase64] = React.useState(
    selectedOrganization.image
  );
  const [expanded, setExpanded] = React.useState(false);

  if (file !== "") {
    const img = document.getElementById("logo");
    var canvas = document.createElement("canvas");
    canvas.width = 174;
    canvas.height = 174;
    var ctx = canvas.getContext("2d");

    img.onload = function () {
      // img, x, y, width, height
      //ctx.drawImage(img, 174, 174)
      //console.log("IMG natural: ", img.naturalWidth, img.naturalHeight)
      //ctx.drawImage(img, 0, 0, 174, 174)
      ctx.drawImage(
        img,
        0,
        0,
        img.width,
        img.height,
        0,
        0,
        canvas.width,
        canvas.height
      );

      const canvasUrl = canvas.toDataURL();
      if (canvasUrl !== fileBase64) {
        setFileBase64(canvasUrl);
        selectedOrganization.image = canvasUrl;
        setSelectedOrganization(selectedOrganization);
      }
    };
  }

  const handleEditOrg = (
    name,
    description,
    orgId,
    image,
    defaults,
    sso_config
  ) => {

    const data = {
      name: name,
      description: description,
      org_id: orgId,
      image: image,
      defaults: defaults,
      sso_config: sso_config,
    };

    const url = globalUrl + `/api/v1/orgs/${selectedOrganization.id}`;
    fetch(url, {
      mode: "cors",
      method: "POST",
      body: JSON.stringify(data),
      credentials: "include",
      crossDomain: true,
      withCredentials: true,
      headers: {
        "Content-Type": "application/json; charset=utf-8",
      },
    })
      .then((response) =>
        response.json().then((responseJson) => {
          if (responseJson["success"] === false) {
            alert.error("Failed updating org: ", responseJson.reason);
          } else {
            alert.success("Successfully edited org!");
          }
        })
      )
      .catch((error) => {
        alert.error("Err: " + error.toString());
      });
  };

  var image = "";
  const editHeaderImage = (event) => {
    const file = event.target.value;
    const actualFile = event.target.files[0];
    const fileObject = URL.createObjectURL(actualFile);
    setFile(fileObject);
  };

  //console.log("USER: ", userdata)
  const orgSaveButton = (
    <Tooltip title="Save any unsaved data" placement="bottom">
      <Button
        style={{ width: 150, height: 55, flex: 1 }}
        variant="contained"
        color="primary"
        disabled={
          userdata === undefined ||
          userdata === null ||
          userdata.admin !== "true"
        }
        onClick={() =>
          handleEditOrg(
            orgName,
            orgDescription,
            selectedOrganization.id,
            selectedOrganization.image,
            {
              app_download_repo: appDownloadUrl,
              app_download_branch: appDownloadBranch,
              workflow_download_repo: workflowDownloadUrl,
              workflow_download_branch: workflowDownloadBranch,
              notification_workflow: notificationWorkflow,
              documentation_reference: documentationReference,
            },
            {
              sso_entrypoint: ssoEntrypoint,
              sso_certificate: ssoCertificate,
              client_id: openidClientId,
              client_secret: openidClientSecret,
              openid_authorization: openidAuthorization,
              openid_token: openidToken,
            }
          )
        }
      >
        <SaveIcon />
      </Button>
    </Tooltip>
  );

  var imageData = file.length > 0 ? file : fileBase64;
  imageData =
    imageData === undefined || imageData.length === 0
      ? defaultImage
      : imageData;
  const imageInfo = (
    <img
      src={imageData}
      alt="Click to upload an image (174x174)"
      id="logo"
      style={{
        maxWidth: 174,
        maxHeight: 174,
        minWidth: 174,
        minHeight: 174,
        objectFit: "contain",
      }}
    />
  );
  return (
    <div>
      <div
        style={{
          color: "white",
          flex: "1",
          display: "flex",
          flexDirection: "row",
        }}
      >
        <Tooltip
          title="Click to edit the organizations's image (174x174)"
          placement="bottom"
        >
          <div
            style={{
              flex: "1",
              margin: "10px 25px 10px 0px",
              border:
                imageData !== undefined && imageData.length > 0
                  ? null
                  : "1px solid #f85a3e",
              cursor: "pointer",
              backgroundColor:
                imageData !== undefined && imageData.length > 0
                  ? null
                  : theme.palette.inputColor,
              maxWidth: 174,
              maxHeight: 174,
            }}
            onClick={() => {
              upload.click();
            }}
          >
            <input
              hidden
              type="file"
              ref={(ref) => (upload = ref)}
              onChange={editHeaderImage}
            />
            {imageInfo}
          </div>
        </Tooltip>
        <div style={{ flex: "3", color: "white" }}>
          <div style={{ marginTop: 8 }} />
          Name
          <TextField
            required
            style={{
              flex: "1",
              marginTop: "5px",
              marginRight: "15px",
              backgroundColor: theme.palette.inputColor,
            }}
            fullWidth={true}
            placeholder="Name"
            type="name"
            id="standard-required"
            margin="normal"
            variant="outlined"
            value={orgName}
            onChange={(e) => {
              const invalid = ["#", ":", "."];
              for (var key in invalid) {
                if (e.target.value.includes(invalid[key])) {
                  alert.error("Can't use " + invalid[key] + " in name");
                  return;
                }
              }

              if (e.target.value.length > 100) {
                alert.error("Choose a shorter name.");
                return;
              }

              setOrgName(e.target.value);
            }}
            color="primary"
            InputProps={{
              style: {
                color: "white",
                height: "50px",
                fontSize: "1em",
              },
              classes: {
                notchedOutline: classes.notchedOutline,
              },
            }}
          />
          <div style={{ marginTop: "10px" }} />
          Description
          <div style={{ display: "flex" }}>
            <TextField
              required
              style={{
                flex: "1",
                marginTop: "5px",
                marginRight: "15px",
                backgroundColor: theme.palette.inputColor,
              }}
              fullWidth={true}
              type="name"
              id="outlined-with-placeholder"
              margin="normal"
              variant="outlined"
              placeholder="A description for the organization"
              value={orgDescription}
              onChange={(e) => {
                setOrgDescription(e.target.value);
              }}
              InputProps={{
                classes: {
                  notchedOutline: classes.notchedOutline,
                },
                style: {
                  color: "white",
                },
              }}
            />
            <div style={{ margin: "auto", textalign: "center" }}>
              {orgSaveButton}
            </div>
          </div>
        </div>
      </div>
      <div style={{ textAlign: "center" }}>
        <IconButton
          style={{ color: "white", marginTop: 10 }}
          onClick={() => {
            setExpanded(!expanded);
          }}
        >
          {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
        </IconButton>
        {expanded ? (
          <Grid container spacing={3} style={{ textAlign: "left" }}>
            <Grid item xs={12} style={{}}>
              <span>
                <Typography>Notification Workflow ID</Typography>
                <TextField
                  required
                  style={{
                    flex: "1",
                    marginTop: "5px",
                    marginRight: "15px",
                    backgroundColor: theme.palette.inputColor,
                  }}
                  fullWidth={true}
                  type="name"
                  id="outlined-with-placeholder"
                  margin="normal"
                  variant="outlined"
                  placeholder="ID of the workflow to receive notifications"
                  value={notificationWorkflow}
                  onChange={(e) => {
                    setNotificationWorkflow(e.target.value);
                  }}
                  InputProps={{
                    classes: {
                      notchedOutline: classes.notchedOutline,
                    },
                    style: {
                      color: "white",
                    },
                  }}
                />
              </span>
            </Grid> 
            <Grid item xs={12} style={{}}>
              <span>
                <Typography>Org Documentation reference</Typography>
                <TextField
                  required
                  style={{
                    flex: "1",
                    marginTop: "5px",
                    marginRight: "15px",
                    backgroundColor: theme.palette.inputColor,
                  }}
                  fullWidth={true}
                  type="name"
                  id="outlined-with-placeholder"
                  margin="normal"
                  variant="outlined"
                  placeholder="URL to an external reference for this implementation"
                  value={documentationReference}
                  onChange={(e) => {
                    setDocumentationReference(e.target.value);
                  }}
                  InputProps={{
                    classes: {
                      notchedOutline: classes.notchedOutline,
                    },
                    style: {
                      color: "white",
                    },
                  }}
                />
              </span>
            </Grid>
						{isCloud ? null : 
						<Grid item xs={12} style={{marginTop: 50 }}>
							<Typography variant="h4" style={{textAlign: "center",}}>OpenID connect</Typography>
							<Grid container style={{marginTop: 10, }}>
            		<Grid item xs={6} style={{}}>
            		  <span>
            		    <Typography>Client ID</Typography>
            		    <TextField
            		      required
            		      style={{
            		        flex: "1",
            		        marginTop: "5px",
            		        marginRight: "15px",
            		        backgroundColor: theme.palette.inputColor,
            		      }}
            		      fullWidth={true}
            		      type="name"
            		      multiline={true}
            		      rows={2}
            		      disabled={
            		        selectedOrganization.manager_orgs !== undefined &&
            		        selectedOrganization.manager_orgs !== null &&
            		        selectedOrganization.manager_orgs.length > 0
            		      }
            		      id="outlined-with-placeholder"
            		      margin="normal"
            		      variant="outlined"
            		      placeholder="The OpenID client ID from the identity provider"
            		      value={openidClientId}
            		      onChange={(e) => {
            		        setOpenidClientId(e.target.value);
            		      }}
            		      InputProps={{
            		        classes: {
            		          notchedOutline: classes.notchedOutline,
            		        },
            		        style: {
            		          color: "white",
            		        },
            		      }}
            		    />
            		  </span>
            		</Grid>
            		<Grid item xs={6} style={{}}>
            		  <span>
            		    <Typography>Client Secret (optional)</Typography>
            		    <TextField
            		      required
            		      style={{
            		        flex: "1",
            		        marginTop: "5px",
            		        marginRight: "15px",
            		        backgroundColor: theme.palette.inputColor,
            		      }}
            		      fullWidth={true}
            		      type="name"
            		      multiline={true}
            		      rows={2}
            		      disabled={
            		        selectedOrganization.manager_orgs !== undefined &&
            		        selectedOrganization.manager_orgs !== null &&
            		        selectedOrganization.manager_orgs.length > 0
            		      }
            		      id="outlined-with-placeholder"
            		      margin="normal"
            		      variant="outlined"
            		      placeholder="The OpenID client secret - DONT use this if dealing with implicit auth / PKCE"
            		      value={openidClientSecret}
            		      onChange={(e) => {
            		        setOpenidClientSecret(e.target.value);
            		      }}
            		      InputProps={{
            		        classes: {
            		          notchedOutline: classes.notchedOutline,
            		        },
            		        style: {
            		          color: "white",
            		        },
            		      }}
            		    />
            		  </span>
            		</Grid>
            	</Grid>
							<Grid container style={{marginTop: 10, }}>
            		<Grid item xs={6} style={{}}>
            		  <span>
            		    <Typography>Authorization URL</Typography>
            		    <TextField
            		      required
            		      style={{
            		        flex: "1",
            		        marginTop: "5px",
            		        marginRight: "15px",
            		        backgroundColor: theme.palette.inputColor,
            		      }}
            		      fullWidth={true}
            		      type="name"
            		      id="outlined-with-placeholder"
            		      margin="normal"
            		      variant="outlined"
            		      multiline={true}
            		      rows={2}
            		      placeholder="The OpenID authorization URL (usually ends with /authorize)"
            		      value={openidAuthorization}
            		      onChange={(e) => {
            		        setOpenidAuthorization(e.target.value)
            		      }}
            		      InputProps={{
            		        classes: {
            		          notchedOutline: classes.notchedOutline,
            		        },
            		        style: {
            		          color: "white",
            		        },
            		      }}
            		    />
            		  </span>
            		</Grid>
            		<Grid item xs={6} style={{}}>
            		  <span>
            		    <Typography>Token URL</Typography>
            		    <TextField
            		      required
            		      style={{
            		        flex: "1",
            		        marginTop: "5px",
            		        marginRight: "15px",
            		        backgroundColor: theme.palette.inputColor,
            		      }}
            		      fullWidth={true}
            		      type="name"
            		      id="outlined-with-placeholder"
            		      margin="normal"
            		      variant="outlined"
            		      multiline={true}
            		      rows={2}
            		      placeholder="The OpenID token URL (usually ends with /token)"
            		      value={openidToken}
            		      onChange={(e) => {
            		        setOpenidToken(e.target.value)
            		      }}
            		      InputProps={{
            		        classes: {
            		          notchedOutline: classes.notchedOutline,
            		        },
            		        style: {
            		          color: "white",
            		        },
            		      }}
            		    />
            		  </span>
            		</Grid>
							</Grid>
						</Grid>
						}
						{/*isCloud ? null : */}
						<Grid item xs={12} style={{marginTop: 50,}}>
            	<Typography variant="h4" style={{textAlign: "center",}}>SAML SSO (v1.1)</Typography>
							<Grid container style={{marginTop: 20, }}>
            		<Grid item xs={6} style={{}}>
            		  <span>
            		    <Typography>SSO Entrypoint (IdP)</Typography>
            		    <TextField
            		      required
            		      style={{
            		        flex: "1",
            		        marginTop: "5px",
            		        marginRight: "15px",
            		        backgroundColor: theme.palette.inputColor,
            		      }}
            		      fullWidth={true}
            		      type="name"
            		      multiline={true}
            		      rows={2}
            		      disabled={
            		        selectedOrganization.manager_orgs !== undefined &&
            		        selectedOrganization.manager_orgs !== null &&
            		        selectedOrganization.manager_orgs.length > 0
            		      }
            		      id="outlined-with-placeholder"
            		      margin="normal"
            		      variant="outlined"
            		      placeholder="The entrypoint URL from your provider"
            		      value={ssoEntrypoint}
            		      onChange={(e) => {
            		        setSsoEntrypoint(e.target.value);
            		      }}
            		      InputProps={{
            		        classes: {
            		          notchedOutline: classes.notchedOutline,
            		        },
            		        style: {
            		          color: "white",
            		        },
            		      }}
            		    />
            		  </span>
            		</Grid>
            		<Grid item xs={6} style={{}}>
            		  <span>
            		    <Typography>SSO Certificate (X509)</Typography>
            		    <TextField
            		      required
            		      style={{
            		        flex: "1",
            		        marginTop: "5px",
            		        marginRight: "15px",
            		        backgroundColor: theme.palette.inputColor,
            		      }}
            		      fullWidth={true}
            		      type="name"
            		      id="outlined-with-placeholder"
            		      margin="normal"
            		      variant="outlined"
            		      multiline={true}
            		      rows={2}
            		      placeholder="The X509 certificate to use"
            		      value={ssoCertificate}
            		      onChange={(e) => {
            		        setSsoCertificate(e.target.value);
            		      }}
            		      InputProps={{
            		        classes: {
            		          notchedOutline: classes.notchedOutline,
            		        },
            		        style: {
            		          color: "white",
            		        },
            		      }}
            		    />
            		  </span>
            		</Grid>
            	</Grid>
							{isCloud ? 
								<Typography variant="body2" style={{textAlign: "left",}} color="textSecondary">
									IdP URL for Shuffle: https://shuffler.io/api/v1/login_sso
								</Typography>
							: null}
						</Grid>
						{isCloud ? null : (
              <Grid item xs={6} style={{}}>
                <span>
                  <Typography>App Download URL</Typography>
                  <TextField
                    required
                    style={{
                      flex: "1",
                      marginTop: "5px",
                      marginRight: "15px",
                      backgroundColor: theme.palette.inputColor,
                    }}
                    fullWidth={true}
                    type="name"
                    id="outlined-with-placeholder"
                    margin="normal"
                    variant="outlined"
                    placeholder="A description for the organization"
                    value={appDownloadUrl}
                    onChange={(e) => {
                      setAppDownloadUrl(e.target.value);
                    }}
                    InputProps={{
                      classes: {
                        notchedOutline: classes.notchedOutline,
                      },
                      style: {
                        color: "white",
                      },
                    }}
                  />
                </span>
              </Grid>
            )}
            {isCloud ? null : (
              <Grid item xs={6} style={{}}>
                <span>
                  <Typography>App Download Branch</Typography>
                  <TextField
                    required
                    style={{
                      flex: "1",
                      marginTop: "5px",
                      marginRight: "15px",
                      backgroundColor: theme.palette.inputColor,
                    }}
                    fullWidth={true}
                    type="name"
                    id="outlined-with-placeholder"
                    margin="normal"
                    variant="outlined"
                    placeholder="A description for the organization"
                    value={appDownloadBranch}
                    onChange={(e) => {
                      setAppDownloadBranch(e.target.value);
                    }}
                    InputProps={{
                      classes: {
                        notchedOutline: classes.notchedOutline,
                      },
                      style: {
                        color: "white",
                      },
                    }}
                  />
                </span>
              </Grid>
            )}
            {isCloud ? null : (
              <Grid item xs={6} style={{}}>
                <span>
                  <Typography>Workflow Download URL</Typography>
                  <TextField
                    required
                    style={{
                      flex: "1",
                      marginTop: "5px",
                      marginRight: "15px",
                      backgroundColor: theme.palette.inputColor,
                    }}
                    fullWidth={true}
                    type="name"
                    id="outlined-with-placeholder"
                    margin="normal"
                    variant="outlined"
                    placeholder="A description for the organization"
                    value={workflowDownloadUrl}
                    onChange={(e) => {
                      setWorkflowDownloadUrl(e.target.value);
                    }}
                    InputProps={{
                      classes: {
                        notchedOutline: classes.notchedOutline,
                      },
                      style: {
                        color: "white",
                      },
                    }}
                  />
                </span>
              </Grid>
            )}
            {isCloud ? null : (
              <Grid item xs={6} style={{}}>
                <span>
                  <Typography>Workflow Download Branch</Typography>
                  <TextField
                    required
                    style={{
                      flex: "1",
                      marginTop: "5px",
                      marginRight: "15px",
                      backgroundColor: theme.palette.inputColor,
                    }}
                    fullWidth={true}
                    type="name"
                    id="outlined-with-placeholder"
                    margin="normal"
                    variant="outlined"
                    placeholder="A description for the organization"
                    value={workflowDownloadBranch}
                    onChange={(e) => {
                      setWorkflowDownloadBranch(e.target.value);
                    }}
                    InputProps={{
                      classes: {
                        notchedOutline: classes.notchedOutline,
                      },
                      style: {
                        color: "white",
                      },
                    }}
                  />
                </span>
              </Grid>
            )}

            <div style={{ margin: "auto", textalign: "center", marginTop: 15, marginBottom: 15, }}>
              {orgSaveButton}
            </div>
            {/*
							<span style={{textAlign: "center"}}>
								{expanded ? 
									<ExpandLessIcon />
									:
									<ExpandMoreIcon />
								}
							</span>
							*/}
          </Grid>
        ) : null}
      </div>
    </div>
  );
};

export default OrgHeader;
