import React from "react";
import PropTypes from "prop-types";
import { Grid, Paper, ButtonBase, TextField } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import style from "../styles";
import ResourcePreviewComponent from "./ResourcePreviewComponent";
import { onTextFieldChange } from "../../../../utils/adapters";

const useStyles = makeStyles(style);

const ResourceComponent = ({ resource, onPropertyChange }) => {
  const classes = useStyles();
  return (
    <Paper className={classes.paper}>
      <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="Code"
                fullWidth
                required
                value={resource.resourceCode}
                onChange={onTextFieldChange(onPropertyChange("resourceCode"))}
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                id="resource-name"
                label="Name"
                fullWidth
                required
                value={resource.resourceName}
                onChange={onTextFieldChange(onPropertyChange("resourceName"))}
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                id="resource-path"
                label="Path on disk"
                fullWidth
                disabled
                value={resource.resourcePath}
              />
            </Grid>
          </Grid>
        </Grid>
        <Grid item xs={12}>
          <TextField
            fullWidth
            multiline
            rows={3}
            id="resource-description"
            label="Description"
            variant="outlined"
          />
        </Grid>
      </Grid>
    </Paper>
  );
};

ResourceComponent.propTypes = {
  resource: PropTypes.object.isRequired,
  onPropertyChange: PropTypes.func.isRequired
};

export default ResourceComponent;