"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledFab = void 0;
const ButtonBase_1 = require("@mui/material/ButtonBase");
const Fab_1 = __importDefault(require("@mui/material/Fab"));
const styled_1 = require("../styled");
const enums_1 = require("./enums");
const getBgColor = ({ theme, color, fabState, }) => {
    const backgroundColors = {
        default: {
            default: theme.palette.grey[100],
            hover: theme.palette.grey[200],
            active: theme.palette.grey[300],
        },
        primary: {
            default: theme.palette.primary[800],
            hover: theme.palette.primary[700],
            active: theme.palette.primary[900],
        },
        error: {
            default: theme.palette.error[800],
            hover: theme.palette.error[700],
            active: theme.palette.error[900],
        },
        success: {
            default: theme.palette.success[800],
            hover: theme.palette.success[700],
            active: theme.palette.success[900],
        },
        warning: {
            default: theme.palette.warning[800],
            hover: theme.palette.warning[700],
            active: theme.palette.warning[900],
        },
    };
    if (color === enums_1.FabColors.Primary) {
        return backgroundColors.primary[fabState];
    }
    if (color === enums_1.FabColors.Success) {
        return backgroundColors.success[fabState];
    }
    if (color === enums_1.FabColors.Error) {
        return backgroundColors.error[fabState];
    }
    if (color === enums_1.FabColors.Warning) {
        return backgroundColors.warning[fabState];
    }
    return backgroundColors.default[fabState];
};
const getColor = ({ theme, color, }) => {
    if (color === enums_1.FabColors.Default) {
        return theme.palette.grey[800];
    }
    return theme.palette.primary.contrastText;
};
const getSize = (props) => {
    const sizes = {
        small: '42px',
        medium: '52px',
        large: '62px',
    };
    return sizes[props.size || enums_1.FabSizes.Large];
};
exports.StyledFab = (0, styled_1.styled)(Fab_1.default, {
    shouldForwardProp: (props) => props !== 'size' && props !== 'isSquare',
}) `
  width: ${(props) => getSize(props)};
  height: ${(props) => getSize(props)};

  color: ${(props) => getColor({ ...props })};

  background: ${(props) => getBgColor({ ...props, fabState: enums_1.FabStates.Default })};
  border-radius: ${({ theme, isSquare }) => isSquare ? theme.shape.medium : '50%'};
  box-shadow: ${({ theme }) => theme.elevation[200]};

  :hover {
    color: ${(props) => getColor({ ...props })};

    background: ${(props) => getBgColor({ ...props, fabState: enums_1.FabStates.Hover })};
  }

  :active {
    color: ${(props) => getColor({ ...props })};

    background: ${(props) => getBgColor({ ...props, fabState: enums_1.FabStates.Active })};
    box-shadow: ${({ theme }) => theme.elevation[400]};
  }

  &.${ButtonBase_1.buttonBaseClasses.focusVisible} {
    outline: 2px solid ${({ theme }) => theme.palette.components.focused};
    box-shadow: ${({ theme }) => theme.elevation[200]};
  }

  &.${ButtonBase_1.buttonBaseClasses.disabled} {
    color: ${({ theme }) => theme.palette.grey[500]};

    background-color: ${({ theme }) => theme.palette.components.disabled};
  }
`;
