import React, { Fragment, useRef, useState } from 'react';
import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
import { useFetch } from '../hooks/useFetch';
import { Helmet } from 'react-helmet';
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Typography from '@material-ui/core/Typography';
import { Link } from 'react-router-dom';
import { useAuth } from '../providers/AuthProvider';
import InsertPhoto from '@material-ui/icons/InsertPhoto';
import Edit from '@material-ui/icons/Edit';
import IconButton from '@material-ui/core/IconButton';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      flexGrow: 1
    },
    card: {
      maxWidth: 345
    }
  })
);

const Products = () => {
  const classes = useStyles();
  const { data } = useFetch('/categories');
  const { editMode } = useAuth();
  const inputRef = useRef<HTMLInputElement>(null);

  const [thumbnail, setThumbnail] = useState({
    id: null,
    image: 'https://via.placeholder.com/200x100'
  });

  const getImage = (id: number) =>
    thumbnail.id === id
      ? thumbnail.image
      : 'https://via.placeholder.com/200x100';

  const handleClick = () => {
    if (inputRef.current) inputRef.current.click();
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>, id: number) => {
    const errors = [];
    const file = e.target.files![0];
    const formData = new FormData();
    const types = ['image/png', 'image/jpeg', 'image/gif'];
    if (types.every(type => file.type !== type))
      errors.push(`${file.type} wordt niet ondersteund`);
    formData.append(file.name, file);

    fetch(`/category/${id}`, {
      method: 'PUT',
      body: formData
    })
      .then(res => res.json())
      .then(response =>
        setThumbnail({ id: response.id, image: response.thumbnail })
      );
  };

  return (
    <>
      <Helmet>
        <title>Midl | Producten</title>
      </Helmet>
      <Container fixed>
        <div className={classes.root}>
          <Grid container spacing={1}>
            {data &&
              data.map(category => (
                <Grid item xs={3} key={category.id}>
                  <Card className={classes.card}>
                    <CardActionArea>
                      <Link to={`/products/${category.id}`}>
                        <CardMedia
                          component="img"
                          alt={category.name}
                          height="140"
                          image={category.thumbnail || getImage(category.id)}
                          title={category.name}
                        />
                      </Link>
                      <CardContent>
                        <Typography gutterBottom variant="body2" component="p">
                          {category.name}
                        </Typography>
                        {editMode && (
                          <Fragment>
                            <input
                              accept="image/*"
                              hidden
                              type="file"
                              ref={inputRef}
                              onChange={e => handleChange(e, category.id)}
                            />
                            <IconButton onClick={handleClick}>
                              <InsertPhoto />
                            </IconButton>
                            <IconButton>
                              <Edit />
                            </IconButton>
                          </Fragment>
                        )}
                      </CardContent>
                    </CardActionArea>
                  </Card>
                </Grid>
              ))}
          </Grid>
        </div>
      </Container>
    </>
  );
};

export default Products;