import React from 'react';

var mainColor = "#fff"
var secondColor = "#f6f6f6"

export function customTable() {
  return {
    typography: {
      useNextVariants: true,
    },
    overrides: {
      MUIDataTable: {
        paper: {
          position: 'relative',
          // width: '100% !important',
          boxShadow: "0 0 0 0 rgba(154,161,171,.15)",
          border: "1px rgba(0,0,0,0.1) solid",
          borderRadius: "10px",
          overflow: "hidden",
        },
        // responsiveScroll: {
        //   position: 'relative',
        //   width: '100% !important',
        // }
        responsiveScrollMaxHeight: {
          height: 'calc(100vh - 250px)',
          maxHeight: 'calc(100vh - 250px)'
        },
      },
      MuiToolbar: {
        root: {
          position: 'relative',
        }
      },
      MUIDataTableToolbar: {
        root: {
          position: 'relative',
          padding: "0px 15px",
          backgroundColor: '#f2f6fa', //'rgba(0,76,151,0.05)',
        },
        titleText: {
          color: "#555"
        },
        icon: {
          color: "#555 !important"
        },
        iconActive: {
          color: "#555 !important"
        },
        left: {
          flex: "0 0 auto !important"
        },
        actions: {
          flex: "1 0 auto !important"
        }
      },
      MUIDataTableSearch: {
        main: {
          position: 'absolute',
          top: "2px",
          right: "2px",
          width: "350px !important",
          backgroundColor: "#f2f6fa",
          zIndex: "10",
          textAlign: "right",
          display: "block",
        },
        searchIcon: {
          width: "50px !important",
          color: "#555 !important",
          display: "inline-block",
          textAlign: "center",
          verticalAlign: "top",
        },
        searchText: {
          width: "calc(100% - 120px) !important",
          marginRight: "10px",
          color: "#555 !important",
          display: "inline-block",
          verticalAlign: "top",
        },
        clearIcon: {
          width: "50px !important",
          color: "#555 !important",
          display: "inline-block",
          verticalAlign: "top",
        },
      },
      MuiTableCell: {
        root: {
          display: 'table-cell',
          padding: 15,
          paddingLeft: 25,
          fontSize: '0.875rem',
          textAlign: 'left',
          fontFamily: "Roboto, Helvetica, Arial, sans-serif",
          fontWeight: 400,
          lineHeight: 1.43,
          borderBottom: '1px solid rgba(224, 224, 224, 1)',
          letterSpacing: '0.01071em',
          verticalAlign: 'inherit',
        }
      },
      MuiPopover: {
        paper: {
          outline: 0,
          position: 'absolute',
          maxWidth: 'calc(100% -32px)',
          minWidth: 199,
          maxHeight: 'calc(100% -32px)',
          minHeight: 16,
          overflowX: 'hidden',
          overflowY: 'auto',
          width: 400
        }
      },
      MUIDataTableFilterList: {
        root: {
          backgroundColor: "#f2f6fa",
          margin: "0px 0px 0px 0px",
          padding: "0px 16px 0px 16px"
        },
        chip: {
          margin: "8px 8px 8px 0px",
          color: "#555",
        }
      },
      MUIDataTableHead: {
        main: {
          position: 'relative',
          backgroundColor: mainColor,
          color: "#555",
          // display: "flex",
          // alignItems: "stretch"
        },
        fixedHeader: {
          // position: "relative",
          borderBottom: "1px rgba(0,0,0,0.1) solid",
          backgroundColor: '#f2f6fa', //'rgba(0,76,151,0.05)',
          color: "#555",
          padding: "10px 20px",
          height: "auto"
          ,
          marginTop: "10px"
        },
      },
      MUIDataTableHeadRow: {
        root: {
          position: 'relative',
          backgroundColor: mainColor,
        }
      },
      MUIDataTableHeadCell: {
        root: {
          fontSize: "10pt",
          fontWeight: "500",
          color: "#555",
          backgroundColor: secondColor,
        },
        fixedHeader: {
          // position: "relative",
          borderBottom: "1px rgba(0,0,0,0.1) solid",
          backgroundColor: '#f2f6fa', //'rgba(0,76,151,0.05)',
          color: "#555",
          padding: "10px 25px",
          height: "auto"
        },
        toolButton: {
          display: "flex",
          height: "auto",
          whiteSpace: 'nowrap'
        },
        data: {
          display: "inline-block",
          verticalAlign: "top",
        },
        sortActive: {
          color: "#555"
        },
        sortAction: {
          color: "#555",
          display: "inline-block",
          verticalAlign: "top",
          MuiButtonBase: {
            color: "#555",
            root: {
              color: "#555",
            }
          }
        }
      },
      MUIDataTableBodyCell: {
        root: {
          position: 'relative',
          fontSize: "13px",
        }
      },
      MUIDataTableSelectCell: {
        headerCell: {
          backgroundColor: secondColor,
          checkboxRoot: {
            color: "#555",
          }
        },
        checkboxRoot: {
          color: "#555"
        }
      },
      MuiInput: {
        root: {
          top: "5px",
          color: "#555 !important",
        },
        underline: {
          borderBottom: "1px #555 solid !important",
        }
      },
      MuiSelect: {
        root: {
          top: "0",
          color: "#555 !important",
        },
      }
      // MuiIconButton: {
      //   root: {
      //     color: "#fff !important",
      //   }
      // }
    }
  }
}

export function customTable2() {
  return {
    typography: {
      useNextVariants: true,
    },
    overrides: {
      MUIDataTable: {
        root: {
          backgroundColor: secondColor,
        },
        paper: {
          boxShadow: "0 0 30px 0 rgba(154,161,171,.15)",
          border: "1px rgba(0,0,0,0.1) solid",
          borderRadius: "5px",
          overflow: "hidden",
        },
      },
      MuiToolbar: {
        root: {
          left: {
            flex: "0 0 auto !important"
          },
          actions: {
            flex: "0 0 auto !important"
          }
        }
      },
      MUIDataTableToolbar: {
        root: {
          backgroundColor: secondColor,
        },
        titleText: {
          color: "#555"
        },
        icon: {
          color: "#555"
        },
      },
      MUIDataTableSearch: {
        searchIcon: {
          color: "#555"
        },
        searchText: {
          color: "#555",
        },
        clearIcon: {
          color: "#555"
        },
      },
      MUIDataTableHead: {
        main: {
          backgroundColor: mainColor,
          color: "#555"
        }
      },
      MUIDataTableHeadRow: {
        root: {
          backgroundColor: mainColor,
        }
      },
      MUIDataTableHeadCell: {
        root: {
          fontSize: "10pt",
          fontWeight: "500",
          color: mainColor,
        },
        fixedHeader: {
          position: "relative",
          backgroundColor: secondColor,
          color: "#555",
          padding: "10px",
          height: "auto",
        },
        toolButton: {
          display: "flex",
          height: "auto"
        },
        data: {
          display: "inline-block",
          verticalAlign: "top",
        },
        sortActive: {
          color: "#555"
        },
        sortAction: {
          color: "#555",
          display: "inline-block",
          verticalAlign: "top",
          MuiButtonBase: {
            color: "#555",
            root: {
              color: "#555",
            }
          }
        }
      },
      MUIDataTableBodyCell: {
        root: {
          fontSize: "10pt",
          padding: "10px"
        }
      },
      MUIDataTableSelectCell: {
        headerCell: {
          backgroundColor: secondColor,
          checkboxRoot: {
            color: "#fff",
          }
        },
        checkboxRoot: {
          color: "#555"
        }
      },
    }
  }
}

export function customTable3() {
  return {
    typography: {
      useNextVariants: true,
    },
    overrides: {
      MUIDataTable: {
        root: {
          backgroundColor: secondColor,
        },
        paper: {
          boxShadow: "0 0 30px 0 rgba(154,161,171,.15)",
          border: "1px rgba(0,0,0,0.1) solid",
          borderRadius: "5px",
          overflow: "hidden",
        },
      },
      responsiveScrollMaxHeight: {
      },
      MuiToolbar: {
        root: {
          left: {
            flex: "0 0 auto !important"
          },
          actions: {
            flex: "0 0 auto !important"
          }
        }
      },
      MUIDataTableToolbar: {
        root: {
          backgroundColor: secondColor,
        },
        titleText: {
          color: "#555"
        },
        icon: {
          color: "#555"
        },
      },
      MUIDataTableSearch: {
        searchIcon: {
          color: "#555"
        },
        searchText: {
          color: "#555",
        },
        clearIcon: {
          color: "#555"
        },
      },
      MUIDataTableHead: {
        main: {
          backgroundColor: mainColor,
          color: "#555"
        }
      },
      MUIDataTableHeadRow: {
        root: {
          backgroundColor: mainColor,
        }
      },
      MUIDataTableHeadCell: {
        root: {
          fontSize: "10pt",
          fontWeight: "500",
          color: mainColor,
        },
        fixedHeader: {
          position: "relative",
          backgroundColor: secondColor,
          color: "#555",
          padding: "10px",
          height: "auto",
        },
        toolButton: {
          display: "flex",
          height: "auto"
        },
        data: {
          display: "inline-block",
          verticalAlign: "top",
        },
        sortActive: {
          color: "#555"
        },
        sortAction: {
          color: "#555",
          display: "inline-block",
          verticalAlign: "top",
          MuiButtonBase: {
            color: "#555",
            root: {
              color: "#555",
            }
          }
        }
      },
      MUIDataTableBodyCell: {
        root: {
          fontSize: "10pt"
        }
      },
      ColorPallete3: {
        backgroundColor: '#37b5e6'
      },
      MuiTableCell: {
        root: {
          display: 'table-cell',
          padding: 7,
          paddingLeft: 25,
          paddingRight: 25,
          fontSize: '0.875rem',
          textAlign: 'left',
          fontFamily: "Roboto, Helvetica, Arial, sans-serif",
          fontWeight: 400,
          lineHeight: 1.43,
          borderBottom: '1px solid rgba(224, 224, 224, 1)',
          letterSpacing: '0.01071em',
          verticalAlign: 'inherit',
        }
      },
      MUIDataTableSelectCell: {
        headerCell: {
          backgroundColor: secondColor,
          checkboxRoot: {
            color: "#fff",
          }
        },
        checkboxRoot: {
          color: "#555"
        }
      },
    }
  }
}

export function customTable4() {
  return {
    typography: {
      useNextVariants: true,
    },
    overrides: {
      MUIDataTable: {
        root: {
          backgroundColor: secondColor,
        },
        paper: {
          boxShadow: "0 0 30px 0 rgba(154,161,171,.15)",
          border: "1px rgba(0,0,0,0.1) solid",
          borderRadius: "5px",
          overflow: "hidden",
        },
        responsiveScrollMaxHeight: {
          maxHeight:'700px !important' 
        },
      },
      MuiToolbar: {
        root: {
          left: {
            flex: "0 0 auto !important"
          },
          actions: {
            flex: "0 0 auto !important"
          }
        }
      },
      MUIDataTableToolbar: {
        root: {
          backgroundColor: secondColor,
        },
        titleText: {
          color: "#555"
        },
        icon: {
          color: "#555"
        },
      },
      MUIDataTableSearch: {
        searchIcon: {
          color: "#555"
        },
        searchText: {
          color: "#555",
        },
        clearIcon: {
          color: "#555"
        },
      },
      MUIDataTableHead: {
        main: {
          backgroundColor: mainColor,
          color: "#555"
        }
      },
      MUIDataTableHeadRow: {
        root: {
          backgroundColor: mainColor,
        }
      },
      MUIDataTableHeadCell: {
        root: {
          fontSize: "10pt",
          fontWeight: "500",
          color: mainColor,
        },
        fixedHeader: {
          position: "relative",
          backgroundColor: secondColor,
          color: "#555",
          padding: "10px",
          height: "auto",
        },
        toolButton: {
          display: "flex",
          height: "auto"
        },
        data: {
          display: "inline-block",
          verticalAlign: "top",
        },
        sortActive: {
          color: "#555"
        },
        sortAction: {
          color: "#555",
          display: "inline-block",
          verticalAlign: "top",
          MuiButtonBase: {
            color: "#555",
            root: {
              color: "#555",
            }
          }
        }
      },
      MUIDataTableBodyCell: {
        root: {
          fontSize: "10pt"
        }
      },
      ColorPallete3: {
        backgroundColor: '#37b5e6'
      },
      MuiTableCell: {
        root: {
          display: 'table-cell',
          padding: 7,
          paddingLeft: 0,
          paddingRight: 0,
          fontSize: '0.875rem',
          textAlign: 'left',
          fontFamily: "Roboto, Helvetica, Arial, sans-serif",
          fontWeight: 400,
          lineHeight: 1.43,
          borderBottom: '1px solid rgba(224, 224, 224, 1)',
          letterSpacing: '0.01071em',
          verticalAlign: 'inherit',
        }
      },
      MUIDataTableSelectCell: {
        headerCell: {
          backgroundColor: secondColor,
          checkboxRoot: {
            color: "#fff",
          }
        },
        checkboxRoot: {
          color: "#555"
        }
      },
    }
  }
}

export function customOptions() {
  return {
    // selectableRows: false,
    selectableRows: 'none',
    filterType: 'multiselect',
    responsive: 'scroll',
    viewColumns: true,
    rowsPerPage: 5,
    rowsPerPageOptions: [5, 10, 20, 50],
    print: false,
    download: false,
    elevation: 5,
    filter: true,
    search: true,
  }
}

export function customOptions2() {
  return {
    // selectableRows: false,
    selectableRows: 'none',
    filterType: 'multiselect',
    responsive: 'scrollMaxHeight',
    rowsPerPage: 5,
    rowsPerPageOptions: [5, 10, 20, 50],
    print: false,
    download: false,
    elevation: 5,
  }
}

export function customOptionsFixedColumn() {
  return {
    // selectableRows: false,
    selectableRows: 'none',
    filterType: false,
    filter: false,
    sort: false,
    responsive: 'scrollMaxHeight',
    viewColumns: false,
    // overflowX: 'auto',
    print: false,
    download: false,
    elevation: 5,
    search: false,
    pagination: false
  }
}

export function customOptionsManagementDocument() {
  return {
    // selectableRows: false,
    selectableRows: 'none',
    filterType: 'multiselect',
    responsive: 'scroll',
    viewColumns: true,
    rowsPerPage: 10,
    rowsPerPageOptions: [10, 20, 30, 50],
    print: false,
    download: false,
    elevation: 5,
    filter: true,
    search: true,
  }
}

export function customOptionsFixedColumnMonitoring() {
  return {
    selectableRows: false,
    selectableRows: 'none',
    filterType: false,
    filter: false,
    sort: true,
    responsive: 'scrollMaxHeight',
    viewColumns: false,
    // overflowX: 'auto',
    print: false,
    download: false,
    elevation: 5,
    search: true,
    pagination: true,
    rowsPerPage: 25,
    rowsPerPageOptions: [25, 50, 100, 200],
  }
}