import React from "react";
import {
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TableRow,
} from "@material-ui/core";

import FileDragArea from "../FileDragArea";
import ListHead from "../ListHead";
import SubListItem from "../SubListItem";
import { useManifestCreateContext } from "../../Contexts/ManifestCreateContext";
import ManifestECUFileTypes from "../ManifestECUFileTypes";

const options = [
  {
    label: "Filename",
    field: "filename",
    readonly: true,
  },
  {
    label: "Offset",
    field: "offset",
  },
  {
    label: "Checksum",
    field: "checksum",
  },
  {
    label: "Type",
    field: "type",
    control: ManifestECUFileTypes,
  },
  {
    label: "",
    field: "filename",
    delete: true,
  },
];

const ManifestECUFileList = ({ data }) => {
  const { addECUFile, deleteECUFile } = useManifestCreateContext();

  const onAddFile = (files) => {
    addECUFile(data.data_id, files);
  };

  const onDeletFile = (filename) => {
    deleteECUFile(data.data_id, filename);
  };

  return (
    <Table>
      {data && data.files && data.files.length > 0 && (
        <ListHead options={options} />
      )}
      <TableBody>
        {data.files.map((file) => (
          <SubListItem
            key={file.filename}
            data={file}
            options={options}
            onDelete={onDeletFile}
          />
        ))}
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={options.length}>
            <FileDragArea onFileSelect={onAddFile}>ADD FILES</FileDragArea>
          </TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  );
};

export default ManifestECUFileList;