import { Avatar, ButtonBase, Theme, Tooltip } from "@mui/material";
import { Tune as PresetsIcon, ViewList as ComponentsIcon } from "@mui/icons-material";
import { makeStyles } from "@mui/styles";
import { useThemeType } from "../hooks/useThemeType";
import classnames from "classnames";
import { capitalize } from "lodash";
import React from "react";
import { ProductTab } from "./DeviceProduct";

const useStyles = makeStyles((theme: Theme) => {
  const themeType = useThemeType();
  const activeBG = theme.palette.secondary.main;
  return ({
    avatar: {
      color: themeType === "light" ? theme.palette.common.black : theme.palette.common.white,
      backgroundColor: "transparent",
      width: theme.spacing(5),
      height: theme.spacing(5),
      border: "1px solid",
      borderColor: theme.palette.divider
    },
    active: {
      color: theme.palette.getContrastText(activeBG),
      backgroundColor: activeBG,
      border: 0
    },
    customIcon: {
      padding: theme.spacing(0.5)
    }
  });
});

interface Props {
  tab: ProductTab;
  onClick: (selected: ProductTab) => void;
  active?: boolean;
}

export default function ProductTabChip(props: Props) {
  const classes = useStyles();
  const { tab, active, onClick } = props;

  const name = () => {
    return capitalize(tab);
  };

  const hasCustomIcon = () => {
    switch (tab) {
      default:
        return false;
    }
  };

  const customIconSrc = () => {
    switch (tab) {
      default:
        return undefined;
    }
  };

  const icon = () => {
    switch (tab) {
      case "presets":
        return <PresetsIcon fontSize="small" />;
      case "components":
        return <ComponentsIcon fontSize="small" />;
      default:
        return <React.Fragment />;
    }
  };

  return (
    <Tooltip title={name()}>
      <Avatar
        alt={name()}
        src={hasCustomIcon() ? customIconSrc() : undefined}
        className={classnames(
          classes.avatar,
          active && classes.active,
          hasCustomIcon() && classes.customIcon
        )}
        component={ButtonBase}
        onClick={() => onClick(tab)}>
        {!hasCustomIcon() && icon()}
      </Avatar>
    </Tooltip>
  );
}