text: import React, { useState } from "react";
  import PropTypes from "prop-types";
  import MUIDataTable from "mui-datatables";
  import CustomFooter from 'components/TableFooter/footer';
  
  import TableRow from "@material-ui/core/TableRow";
  import TableCell from "@material-ui/core/TableCell";
  import ImageUpload from 'image-upload-react'
  
  export default function CardUserTable({ color, data, updateParentState }) {
    const [resizableColumns, setResizableColumns] = useState(false);
    const [imageSrc, setImageSrc] = useState(data['photolife'])
  
    const handleImageSelect = (e) => {
      setImageSrc(URL.createObjectURL(e.target.files[0]))
    }
  
    const columns = [
      {
        name: "commodity_type",
        label: "分類名稱",
        options: {
          filter: false,
          sort: false
        }
      },
      {
        name: "commodity_type_photo",
        label: "分類圖片",
        options: {
          filter: false,
          sort: false,
          customBodyRenderLite: (dataIndex) => {
            let v = data[dataIndex].commodity_type_photo;
            return <img
              src={v}
              className="h-24 w-24 bg-white  border"
              alt="..."
            ></img>
          },
        }
      },
  
  
  
  
    ];
  
  
    const options = {
      filter: true,
      filterType: 'dropdown',
      responsive: 'standard',
      fixedHeader: true,
      fixedSelectColumn: false,
      tableBodyHeight: '600px',
  
      rowsPerPage: 10,
  
      resizableColumns: resizableColumns,
      // customFooter: (count, page, rowsPerPage, changeRowsPerPage, changePage, textLabels) => {
      //   return (
      //     <CustomFooter
      //       count={count}
      //       page={page}
      //       rowsPerPage={rowsPerPage}
      //       changeRowsPerPage={changeRowsPerPage}
      //       changePage={changePage}
      //       textLabels={textLabels}
      //     />
      //   );
      // },
  
      expandableRows: true,
      expandableRowsHeader: false,
      expandableRowsOnClick: true,
      isRowExpandable: (dataIndex, expandedRows) => {
        // if (dataIndex === 3 || dataIndex === 4) return false;
  
        // // Prevent expand/collapse of any row if there are 4 rows expanded already (but allow those already expanded to be collapsed)
        // if (expandedRows.data.length > 4 && expandedRows.data.filter(d => d.dataIndex === dataIndex).length === 0) return false;
        return true;
      },
      // rowsExpanded: [0, 1],
      renderExpandableRow: (rowData, rowMeta) => {
        const colSpan = rowData.length + 1;
        return (
          <TableRow>
            <TableCell colSpan={colSpan}>
  
              <div className="flex flex-wrap">
  
                <div className="w-full lg:w-4/12 px-4">
                  <div className="relative w-full mb-3">
                    <label
                      className="block uppercase text-blueGray-600 text-xs font-bold mb-2"
                      htmlFor="grid-password"
                    >
                      類別圖片
                    </label>
                    <ImageUpload
                      handleImageSelect={handleImageSelect}
  
                      imageSrc={rowData["2"]}
                      setImageSrc={setImageSrc}
                      style={{
                        marginTop: 0,
                        width: 150,
                        height: 150,
                        background: "rgba(186, 230, 253)"
                      }}
                    />
                  </div>
                  <button
                    className="bg-lightBlue-500 text-white active:bg-lightBlue-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
                    type="button"
                  >
                    儲存
                  </button>
                </div>
  
  
  
              </div>
  
  
            </TableCell>
          </TableRow>
        );
      },
      onRowExpansionChange: (curExpanded, allExpanded, rowsExpanded) => console.log(curExpanded, allExpanded, rowsExpanded)
  
  
    };
  
    return (
      <>
  
        <div
  
          className={
            "z-0 relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded " +
            (color === "light" ? "bg-white" : "bg-lightBlue-900 text-white")
          }
        >
          <MUIDataTable title={'貨品分類'} data={data} columns={columns} options={options} />
  
  
  
  
        </div>
      </>
    );
  }
  
  CardUserTable.defaultProps = {
    color: "light",
  };
  
  CardUserTable.propTypes = {
    color: PropTypes.oneOf(["light", "dark"]),
  };
  