import { useRef } from 'react';
import { Box, IconButton, Input, InputLabel } from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import { makeStyles } from '@material-ui/core/styles';

import ICON_BUTTON_STYLE from '../../lib/consts/ICON_BUTTON_STYLE';

import { Panel } from '../Panels';
import PeriodicFetch from '../../lib/fetchers/periodicFetch';
import Spinner from '../Spinner';
import { HeaderText } from '../Text';

const useStyles = makeStyles(() => ({
  addFileButton: ICON_BUTTON_STYLE,
  addFileInput: {
    display: 'none',
  },
}));

const Files = (): JSX.Element => {
  const classes = useStyles();
  const addFileInputRef = useRef<HTMLInputElement>();

  const { data, isLoading } = PeriodicFetch(
    `${process.env.NEXT_PUBLIC_API_URL?.replace('/cgi-bin', '/api')}/files`,
  );

  // Let the icon button trigger the invisible input element.
  const onAddFileButtonClick = () => {
    addFileInputRef.current?.click();
  };

  return (
    <Panel>
      <Box style={{ display: 'flex', width: '100%' }}>
        <Box style={{ flexGrow: 1 }}>
          <HeaderText text="Files" />
        </Box>
        <Box>
          <form encType="multipart/form-data">
            <InputLabel htmlFor="add-file-input">
              <Input
                className={classes.addFileInput}
                id="add-file-input"
                ref={addFileInputRef}
                type="file"
              />
              <IconButton
                className={classes.addFileButton}
                onClick={onAddFileButtonClick}
              >
                <AddIcon />
              </IconButton>
            </InputLabel>
          </form>
        </Box>
      </Box>
      {isLoading ? (
        <Spinner />
      ) : (
        <Box>
          <span>{data}</span>
        </Box>
      )}
    </Panel>
  );
};

export default Files;