import * as React from "react";
import CardContent from "@mui/material/CardContent";
import CardActions from "@mui/material/CardActions";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";

import { StyledCard } from "@/components/Card/SQLCard";
import type { LogType } from "@/components/Chart/IndexCreationChart";

export default function VerticalLinearLogsCard(props: {
  logs: LogType[];
  maxLogs?: number;
}) {
  const { logs, maxLogs = 2 } = props;
  const [showAll, setShowAll] = React.useState(false);

  const handleClick = () => {
    setShowAll(!showAll);
  };

  const logsMemo = React.useMemo(() => {
    if (showAll) {
      return logs;
    }
    return logs.slice(0, maxLogs);
  }, [logs, maxLogs, showAll]);

  return (
    <Box>
      <StyledCard variant="outlined">
        <CardContent>
          {logsMemo.map((log) => (
            <LogItem key={log.modifiedBy} log={log} />
          ))}
        </CardContent>
        <CardActions>
          <Button onClick={handleClick}>
            {showAll ? `Hide` : `View More`}
          </Button>
        </CardActions>
      </StyledCard>
    </Box>
  );
}

const LogItem = (props: {
  log: {
    variableName: string;
    variableValue: string;
    modifiedBy: string;
  };
}) => {
  const { log } = props;

  return (
    <Box py="6px">
      <Box
        sx={{
          display: "flex",
          gap: (theme) => theme.spacing(0.5),
          alignItems: "center",
        }}
      >
        <AccountCircleIcon fontSize="small" />
        <Box
          sx={{
            fontSize: "10px",
          }}
        >
          <Typography component="span" fontSize="inherit" fontWeight="bold">
            {/* {log.user} */}Admin
          </Typography>
          <Typography
            component="span"
            fontSize="inherit"
          >{` modified `}</Typography>
          <Typography component="span" fontSize="inherit" fontWeight="bold">
            {log.variableName}
          </Typography>
          <Typography component="span" fontSize="inherit">{` to `}</Typography>
          <Typography component="span" fontSize="inherit" fontWeight="bold">
            {log.variableValue}
          </Typography>
        </Box>
      </Box>
      <Typography component="div" fontSize="8px" color="#8F8F8F" ml="24px">
        {new Date(log.modifiedBy).toLocaleString()}
      </Typography>
    </Box>
  );
};