import { buttonBaseClasses } from '@mui/material/ButtonBase';
import Fab from '@mui/material/Fab';
import { styled } from '../styled';
import { FabColors, FabSizes, FabStates } from './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 === FabColors.Primary) {
        return backgroundColors.primary[fabState];
    }
    if (color === FabColors.Success) {
        return backgroundColors.success[fabState];
    }
    if (color === FabColors.Error) {
        return backgroundColors.error[fabState];
    }
    if (color === FabColors.Warning) {
        return backgroundColors.warning[fabState];
    }
    return backgroundColors.default[fabState];
};
const getColor = ({ theme, color, }) => {
    if (color === 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 || FabSizes.Large];
};
export const StyledFab = styled(Fab, {
    shouldForwardProp: (props) => props !== 'size' && props !== 'isSquare',
}) `
  width: ${(props) => getSize(props)};
  height: ${(props) => getSize(props)};

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

  background: ${(props) => getBgColor({ ...props, fabState: 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: FabStates.Hover })};
  }

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

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

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

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

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