import React from "react";
import { styled } from "@mui/material/styles";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import MuiAccordion, { AccordionProps } from "@mui/material/Accordion";
import MuiAccordionSummary, { AccordionSummaryProps } from "@mui/material/AccordionSummary";
import MuiAccordionDetails from "@mui/material/AccordionDetails";
import { models } from "types";
import { Grid } from "@mui/material";
import ActionsGroup from "./common/ActionsGroup";
import { useTranslation } from "react-i18next";
import { useSensitiveInfo } from "hooks";
import { DataLabel } from "components/common";
import MachineCollapsedContent from "./common/MachineCollapsedContent";

const Accordion = styled((props: AccordionProps) => <MuiAccordion disableGutters elevation={0} square {...props} />)(
  ({ theme }) => ({
    border: `1px solid ${theme.palette.divider}`,
    "&:not(:last-child)": {
      borderBottom: 0
    },
    "&::before": {
      display: "none"
    }
  })
);

const AccordionSummary = styled((props: AccordionSummaryProps) => (
  <MuiAccordionSummary expandIcon={<ExpandMoreIcon />} {...props} />
))(({ theme }) => ({
  backgroundColor: theme.palette.mode === "dark" ? "rgba(255, 255, 255, .05)" : "rgba(0, 0, 0, .03)",
  flexDirection: "row-reverse",
  "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
    transform: "rotate(180deg)"
  },
  "& .MuiAccordionSummary-content": {
    marginLeft: theme.spacing(1)
  },
  minHeight: "20px",
  height: "42px",
  [theme.breakpoints.down("md")]: {
    height: "62px"
  },
  [theme.breakpoints.down("sm")]: {
    height: "102px"
  }
}));

const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
  padding: theme.spacing(1),
  borderTop: "1px solid rgba(0, 0, 0, .125)"
}));

type GridCellProps = {
  label: string;
  value: string;
};

const GridCell: React.FC<GridCellProps> = ({ label, value }) => {
  const { mask } = useSensitiveInfo();
  return (
    <Grid size={{ xs: 12, md: 6, lg: 3 }}>
      <DataLabel label={label} data={mask(value)} />
    </Grid>
  );
};

type Props = {
  machine: models.Machine;
  actions: Array<any>;
  logs: Array<any>;
  addLog: (message: string) => void;
};

const MachineAccordion: React.FC<Props> = ({ machine, actions, logs, addLog }) => {
  const { t } = useTranslation();
  return (
    <Accordion>
      <AccordionSummary aria-controls={`machine-${machine.machineId}-summary`} id={`machine-${machine.machineId}`}>
        <Grid
          container
          flex={1}
          sx={{
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          <Grid size={11}>
            <Grid container>
              <GridCell label={t("Machine.FullName")} value={machine.fullMachineName} />
              <GridCell label={t("Machine.Name")} value={machine.machineName} />
              <GridCell label={t("Machine.IP")} value={machine.iPv4Address || ""} />
              <GridCell label={t("Machine.MAC")} value={machine.macAddress} />
            </Grid>
          </Grid>
          <Grid size={1} style={{ textAlign: "right" }}>
            <ActionsGroup machine={machine} actions={actions} addLog={addLog} />
          </Grid>
        </Grid>
      </AccordionSummary>
      <AccordionDetails>
        <MachineCollapsedContent description={machine.description} logs={logs} style={{ width: "100%" }} />
      </AccordionDetails>
    </Accordion>
  );
};

export default MachineAccordion;
