import {
  Chip,
  Tooltip,
  Theme,
  Avatar,
  useTheme,
} from "@mui/material";
import { getDescription, GetComponentIcon } from "pbHelpers/ComponentType";
import { Component } from "models";
import { purple } from "@mui/material/colors";
import { makeStyles } from "@mui/styles";
import { Memory as DefaultIcon } from "@mui/icons-material"

const useStyles = makeStyles((theme: Theme) => {
  return ({
    icon: {
      color: purple["500"]
    },
    customIcon: {
      height: theme.spacing(2.5),
      width: theme.spacing(2.5)
    }
  })
});

interface Props {
  component: Component;
}

export default function ComponentTypeChip(props: Props) {
  const { component } = props;
  const theme = useTheme<Theme>();
  const { type, subtype } = component.settings;
  const classes = useStyles();

  const icon = () => {
    let componentIcon = GetComponentIcon(type, subtype, theme.palette.mode);
    return componentIcon ? (
      <Avatar
        variant="square"
        src={componentIcon}
        className={classes.customIcon}
        alt={"type:" + type + "-subtype:" + subtype}
      />
    ) : (
      <DefaultIcon className={classes.icon} />
    );
  };

  if (component.settings.type) {
    return (
      <Tooltip title={getDescription(component.settings.type)}>
        <Chip variant="outlined" label={component.name()} icon={icon()} />
      </Tooltip>
    );
  } else {
    return null;
  }
}
