import React from "react";
import PropTypes from "prop-types";
import {
  Grid,
  Paper,
  ButtonBase,
  TextField,
  FormControlLabel,
  Checkbox,
  Button
} from "@material-ui/core";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { Save as SaveIcon, Delete as DeleteIcon } from "@material-ui/icons";
import { makeStyles } from "@material-ui/core/styles";
import style from "../styles";
import ResourcePreviewComponent from "./ResourcePreviewComponent";
import MimeTypeComponent from "./MimeTypeComponent";
import useResourceDeleteDialog from "../../hooks/useResourceDeleteDialog";
import { onTextFieldChange } from "../../../../utils/adapters";
import { useHistory } from "react-router-dom";
import { useTranslation } from "react-i18next";
import LinksComponent from "./LinksComponent";

const useStyles = makeStyles(style);

const ResourceComponent = ({
  resource,
  mimeTypes,
  resourceCategories,
  onPropertyChange,
  processing,
  setProcessing
}) => {
  const classes = useStyles();
  const history = useHistory();
  const { t } = useTranslation();
  const {
    component: ResourceDeleteDialog,
    handleOpen: handleOpenDeleteDialog
  } = useResourceDeleteDialog(resource, setProcessing, () =>
    history.push("/resources")
  );

  return (
    <>
      <Paper className={classes.resourceData}>
        <Grid container spacing={2}>
          <Grid item xs={12} sm={5}>
            <ButtonBase>
              <ResourcePreviewComponent resource={resource} />
            </ButtonBase>
          </Grid>
          <Grid item xs={12} sm={7}>
            <Grid container spacing={2}>
              <Grid item xs={12} sm={6}>
                <TextField
                  id="resource-code"
                  label={t("Resource.Code")}
                  fullWidth
                  required
                  value={resource.resourceCode}
                  onChange={onTextFieldChange(onPropertyChange("resourceCode"))}
                />
              </Grid>
              <Grid item xs={12} sm={6}>
                <TextField
                  id="resource-name"
                  label={t("Resource.Name")}
                  fullWidth
                  required
                  value={resource.resourceName}
                  onChange={onTextFieldChange(onPropertyChange("resourceName"))}
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  id="resource-path"
                  label={t("Resource.PathOnDisk")}
                  fullWidth
                  disabled
                  value={resource.resourcePath}
                />
              </Grid>
              <MimeTypeComponent
                mimeType={{
                  mimeTypeId: resource.mimeTypeId,
                  mimeTypeName: resource.mimeType
                }}
                mimeTypes={mimeTypes}
                onPropertyChange={onPropertyChange}
              />
              <Grid item xs={12} sm={9}>
                <Autocomplete
                  id="resource-category"
                  options={resourceCategories}
                  value={resource.categoryId}
                  onChange={(_event, value, _reason, _details) =>
                    onPropertyChange("categoryId")(value.categoryId)
                  }
                  getOptionLabel={(option) => {
                    const optionIsObject =
                      typeof option === "object" && option !== null;
                    if (optionIsObject) return option.categoryName;

                    const category = resourceCategories.find(
                      (z) => z.categoryId === option
                    );
                    return category.categoryName;
                  }}
                  getOptionSelected={(option, value) =>
                    option.categoryId === value
                  }
                  renderInput={(params) => (
                    <TextField {...params} label={t("Resource.Category")} />
                  )}
                />
              </Grid>
              <Grid item xs={12} sm={3}>
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={resource.secured}
                      onChange={(event) =>
                        onPropertyChange("secured")(event.target.checked)
                      }
                      name="resources-is-secured"
                      color="primary"
                    />
                  }
                  label={t("Resource.Secured")}
                />
              </Grid>
            </Grid>
          </Grid>
          <Grid item xs={12}>
            <TextField
              fullWidth
              multiline
              rows={12}
              id="resource-description"
              label={t("Resource.Description")}
              variant="outlined"
            />
          </Grid>
          <Grid container justify="flex-end">
            <Grid item>
              <Button
                variant="outlined"
                color="secondary"
                className={classes.button}
                startIcon={<DeleteIcon />}
                onClick={handleOpenDeleteDialog}
                disabled={!!processing}
              >
                {processing === "delete"
                  ? t("Generic.Deleting")
                  : t("Generic.Delete")}
              </Button>
              <Button
                variant="outlined"
                color="primary"
                className={classes.button}
                startIcon={<SaveIcon />}
                disabled={!!processing}
              >
                {processing === "delete"
                  ? t("Generic.Saving")
                  : t("Generic.Save")}
              </Button>
            </Grid>
          </Grid>
        </Grid>
      </Paper>
      {ResourceDeleteDialog}
      <LinksComponent urls={resource.urls} secured={resource.secured} />
    </>
  );
};

ResourceComponent.propTypes = {
  resource: PropTypes.object.isRequired,
  mimeTypes: PropTypes.array.isRequired,
  resourceCategories: PropTypes.array.isRequired,
  onPropertyChange: PropTypes.func.isRequired,
  processing: PropTypes.string,
  setProcessing: PropTypes.func.isRequired
};

export default ResourceComponent;