import {
  Avatar,
  Box,
  Button,
  Collapse,
  darken,
  DialogActions,
  DialogContent,
  DialogTitle,
  Divider,
  IconButton,
  List,
  ListItem,
  ListItemAvatar,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  ListSubheader,
  PaletteColor,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TablePagination,
  TableRow,
  Theme,
  Typography,
} from "@mui/material";
import ResponsiveDialog from "common/ResponsiveDialog";
// import { getTableIcons } from "common/ResponsiveTable";
import SearchSelect, { Option } from "common/SearchSelect";
// import SmartBreadcrumb from "common/SmartBreadcrumb";
import { useMobile, useSnackbar, useUserAPI } from "hooks";
// import MaterialTable, { Column } from "material-table";
import { User } from "models";
import PageContainer from "pages/PageContainer";
// import { ListUsersResponse } from "providers/pond/userAPI";
import React, { useEffect, useState } from "react";
import { makeStyles } from "@mui/styles";
import { pond } from "protobuf-ts/pond";
import { getSecondaryColour, getSignatureAccentColour } from "services/whiteLabel";
import { Add, ChevronRight, Face, Remove } from "@mui/icons-material";
import ResponsiveTable from "common/ResponsiveTable";

const useStyles = makeStyles((theme: Theme) => {
  // const isMobile = useMobile()
  return ({
  gutter: {
    backgroundColor: darken(theme.palette.background.paper, 0.03),
    border: "none"
  },
  dataTable: {
    backgroundColor: theme.palette.background.paper
  },
  tableContainer: {
    margin: theme.spacing(1),
    [theme.breakpoints.up("sm")]: {
      margin: theme.spacing(2)
    },
    width: "auto"
  },
  title: {
    padding: theme.spacing(1)
  },
  titleContainer: {
    border: "none"
  },
  chipContainer: {
    maxWidth: "100%",
    maxHeight: "100%",
    justifyContent: "flex-start",
    alignItems: "flex-start"
  },
  deleteIcon: {
    color: "var(--status-alert)"
  },
  userAvatar: {
    color: "#fff",
    backgroundColor: getSecondaryColour()["700" as keyof PaletteColor],
    [theme.breakpoints.down("xs")]: {
      width: "32px",
      height: "32px"
    }
  },
  listItemButton: {
    '&:hover': {
      color: getSignatureAccentColour()
    }
  },
  avatarContainer: {
    textAlign: "center",
    justifyContent: "center",
  },
  addIcon: {
    color: "var(--status-ok)"
  }})},
);

interface Props {
  title: string | JSX.Element;
}

export default function Users(props: Props) {
  const { title } = props;
  const classes = useStyles();
  const userAPI = useUserAPI();
  // let tableRef: any = React.createRef();
  const { error, success } = useSnackbar();
  const [pageSize, setPageSize] = useState(5);
  const [isLoading, setIsLoading] = useState(false);
  const [page, setPage] = useState(0);
  const [total, setTotal] = useState(0);
  const [showAllowAction, setShowAllowAction] = useState(false);
  const [selectedAction, setSelectedAction] = useState<Option | undefined>();
  const [showEnableFeature, setShowEnableFeature] = useState(false);
  const [selectedFeature, setSelectedFeature] = useState<Option | undefined>();
  const [selectedUser, setSelectedUser] = useState(User.create());
  const [searchText, setSearchText] = useState("");
  const TitleMap = new Map([
    ["Uploaded", "uploaded"],
    ["Version", "version"],
    ["Platform", "platform"],
    ["Channel", "channel"],
    ["Size", "size"]
  ]);
  const actions = [
    "provision",
    "upload-firmware",
    "remove-devices",
    "copy-token",
    "recluse",
    "pause-data"
  ].sort();
  const features = [
    "admin",
    "beta",
    "billing",
    "security",
    "dev-channel",
    "docs",
    "sleep",
    "support",
    "tasks",
    "teams",
    "maps",
    "json",
    "john-deere",
    "grain-composition",
    "developer",
    "marketplace",
    "installer"
  ].sort();

  const allow = () => {
    const action = selectedAction ? selectedAction.label : "";
    if (selectedUser.id() === "" || action === "") return;
    if (!selectedUser.settings.actions.includes(action)) {
      selectedUser.settings.actions.push(action);
    }
    userAPI
      .updateUser(selectedUser.id(), selectedUser.protobuf())
      .then(() => {
        success("Allowed " + selectedUser.name() + " to " + action);
        setShowAllowAction(false);
        setSelectedAction({} as Option);
      })
      .catch(() => error("Failed to allow " + selectedUser.name() + " to " + action));
  };

  const enable = () => {
    const feature = selectedFeature ? selectedFeature.label : "";
    if (selectedUser.id() === "" || feature === "") return;
    if (!selectedUser.settings.features.includes(feature)) {
      selectedUser.settings.features.push(feature);
    }
    userAPI
      .updateUser(selectedUser.id(), selectedUser.protobuf())
      .then(() => {
        success("Enabled " + feature + " for " + selectedUser.name());
        setShowEnableFeature(false);
        setSelectedFeature({} as Option);
      })
      .catch(() => error("Failed to enable " + feature + " for " + selectedUser.name()));
  };

  const remove = (user: User, type: "action" | "feature", key: string) => {
    if (user.id() === "" || key === "") return;
    if (type === "action") {
      user.settings.actions = user.settings.actions.filter(v => v !== key);
    }
    if (type === "feature") {
      user.settings.features = user.settings.features.filter(v => v !== key);
    }
    userAPI
      .updateUser(user.id(), user.protobuf())
      .then(() => {
        if (type === "action") {
          success("Disallowed " + user.name() + " from " + key);
          setSelectedAction({} as Option);
        }
        if (type === "feature") {
          success("Disabled " + key + " for " + user.name());
          setSelectedFeature({} as Option);
        }
      })
      .catch(() => {
        if (type === "action") {
          error("Failed to disallow " + user.name() + " from " + key);
        }
        if (type === "feature") {
          error("Failed to disable " + key + " for " + user.name());
        }
      });
  };

  const details = (user: User) => {
    const item = (text: string, type: "action" | "feature") => (
      <ListItem key={text}>
        <ListItemIcon>
          <IconButton
            onClick={() => {
              setSelectedUser(user);
              remove(user, type, text);
            }}>
            <Remove className={classes.deleteIcon} />
          </IconButton>
        </ListItemIcon>
        <ListItemText>{text}</ListItemText>
      </ListItem>
    );
    const actions = user.settings.actions;
    const features = user.settings.features;
    // const showActions = view !== "features";
    // const showFeatures = view !== "actions";
    return (
      <List disablePadding dense>
        <ListSubheader className={classes.gutter}>Actions</ListSubheader>
        {actions.map(action => item(action, "action"))}
        <ListItemButton
          onClick={() => {
            setSelectedUser(user);
            setShowAllowAction(true);
          }}>
          <ListItemIcon>
            <IconButton>
              <Add className={classes.addIcon} />
            </IconButton>
          </ListItemIcon>
          <ListItemText>Allow an action</ListItemText>
        </ListItemButton>
        <Divider />
        <ListSubheader className={classes.gutter}>Features</ListSubheader>
        {features.map(feature => item(feature, "feature"))}
        <ListItemButton
          onClick={() => {
            setSelectedUser(user);
            setShowEnableFeature(true);
          }}>
          <ListItemIcon>
            <IconButton>
              <Add className={classes.addIcon} />
            </IconButton>
          </ListItemIcon>
          <ListItemText>Enable a feature</ListItemText>
        </ListItemButton>
      </List>
    );
  };

  const renderUser = (user: User) => {
    const avatarURL = user.settings.avatar;
    const avatar = avatarURL ? (
      <Avatar alt={user.name()} src={avatarURL} />
    ) : (
      <Avatar alt={user.name()}>
        <Face />
      </Avatar>
    );
    return (
      <ListItem style={{ padding: 0 }}>
        <ListItemAvatar>{avatar}</ListItemAvatar>
        <ListItemText primary={user.name()} secondary={user.settings.email} />
      </ListItem>
    );
  }

  // const renderGutter = (user: UserData) => {
  //   return (
      
  //   )
  // }

  // interface UserData {
  //   settings: pond.UserSettings;
  // }
  const [rows, setRows] = useState<User[]>([])

  const loadUsers = () => {
    setIsLoading(true)
    userAPI.listUsers(pageSize, page*pageSize, "desc", "name", searchText).then(resp => {
      let r: User[] = []
      resp.users.forEach((user, _index) => {
        r.push(user)
      })
      setRows(r)
      setTotal(resp.total)
    }).then(() => {
      setIsLoading(false);
    })
  }

  useEffect(() => {
    loadUsers();
  }, [page, pageSize, searchText]); // Trigger fetching data when page or pageSize changes

  const handleRowsPerPageChange = (event: any) => {
    const newRowsPerPage = parseInt(event.target.value, 10); // Get selected value
    setPageSize(newRowsPerPage);
    setPage(0); // Reset to the first page
  };

  const handleCollapse = (user: User) => {
    if (selectedUser.id() === user.id()) {
      setSelectedUser(User.create())
    } else {
      setSelectedUser(user)
    }
  }

  useEffect(() => {
    console.log(isLoading)
  }, [isLoading])

  return (
    <PageContainer>
      <TableContainer className={classes.tableContainer} component={Paper}>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell colSpan={6} className={classes.titleContainer}>
                {typeof(title) === "string" ? 
                  <Typography variant="h5" className={classes.title}>
                    {title}
                  </Typography>
                :
                  <Box className={classes.title}>
                    title
                  </Box>
                }
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell></TableCell>
              <TableCell>Profile</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map((row, index) => (
              <React.Fragment key={"user-row-"+index}>
                <TableRow>
                  <TableCell width={1}>
                    <IconButton sx={{
                      transform: selectedUser.settings.id === row.settings.id ? 
                                                          'rotate(90deg)' : 'rotate(0deg)',
                      transition: 'transform 0.3s ease',
                    }}
                    onClick={() => handleCollapse(row)}>
                      <ChevronRight/>
                    </IconButton>
                  </TableCell>
                  <TableCell>
                    {renderUser(row)}
                  </TableCell>
                </TableRow>
                <TableRow className={classes.gutter}>
                  <TableCell colSpan={6} style={{padding:0, margin: 0, border: "none"}}>
                    <Collapse in={selectedUser.settings.id === row.settings.id} timeout="auto" unmountOnExit>
                      {details(row)}
                    </Collapse>
                  </TableCell>
                </TableRow>
              </React.Fragment>
            ))}
          </TableBody>
        </Table>
        <TablePagination
          rowsPerPageOptions={[5, 10, 20]}
          component="div"
          count={total}
          rowsPerPage={pageSize}
          page={page}
          onPageChange={(_event, page) => setPage(page)}
          onRowsPerPageChange={handleRowsPerPageChange}
        />
      </TableContainer>
      <ResponsiveDialog
        maxWidth="sm"
        fullWidth
        open={showAllowAction}
        onClose={() => setShowAllowAction(false)}
        aria-labelledby="allow-action">
        <DialogTitle id="allow-action-title">Allow an action</DialogTitle>
        <DialogContent>
          <SearchSelect
            label="Select an action to allow"
            selected={selectedAction}
            // options={actions}
            options={actions
              .filter(a => !selectedUser.settings.actions.includes(a))
              .map(a => {
                return { value: a, label: a };
              })}
            changeSelection={(option: Option | null) =>
              setSelectedAction(option ? option : undefined)
            }
          />
        </DialogContent>
        <DialogActions>
          <Button color="primary" onClick={() => setShowAllowAction(false)}>
            Close
          </Button>
          <Button
            color="primary"
            disabled={
              !selectedAction || !actions.includes(selectedAction ? selectedAction.label : "")
            }
            onClick={allow}>
            Allow
          </Button>
        </DialogActions>
      </ResponsiveDialog>
      <ResponsiveDialog
        maxWidth="sm"
        fullWidth
        open={showEnableFeature}
        onClose={() => setShowEnableFeature(false)}
        aria-labelledby="enable-feature">
        <DialogTitle id="enable-feature-title">Enable a feature</DialogTitle>
        <DialogContent>
          <SearchSelect
            label="Select a feature to enable"
            selected={selectedFeature}
            // options={features}
            options={features
              .filter(a => !selectedUser.settings.features.includes(a))
              .map(a => {
                return { value: a, label: a };
              })}
            changeSelection={(option: Option | null) =>
              setSelectedFeature(option ? option : undefined)
            }
          />
        </DialogContent>
        <DialogActions>
          <Button color="primary" onClick={() => setShowEnableFeature(false)}>
            Close
          </Button>
          <Button
            color="primary"
            disabled={
              !selectedFeature || !features.includes(selectedFeature ? selectedFeature.label : "")
            }
            onClick={enable}>
            Enable
          </Button>
        </DialogActions>
      </ResponsiveDialog>
      <ResponsiveTable<User> 
        // title="Users"
        rows={rows}
        total={total}
        page={page}
        pageSize={pageSize}
        setPage={setPage}
        handleRowsPerPageChange={handleRowsPerPageChange}
        setSearchText={setSearchText}
        isLoading={isLoading}
        renderGutter={details}
        // multiGutter
      />
    </PageContainer>
  );
}