import { Box, IconButton, Stack, Typography } from '@mui/material';

import googleLogo from '../../../../../assets/google.svg';
import microsoftLogo from '../../../../../assets/microsoft.svg';
import oktaLogo from '../../../../../assets/okta.svg';

type Props = {
  type: 'Microsoft' | 'Google' | 'Okta';
  onClick: () => void;
};

const getLogo = (type: Props['type']) => {
  switch (type) {
    case 'Microsoft':
      return microsoftLogo;
    case 'Google':
      return googleLogo;
    case 'Okta':
      return oktaLogo;
  }
};

const SSOButton = ({ type, onClick }: Props) => (
  <Stack sx={{ alignItems: 'center', gap: 0.5 }}>
    <IconButton
      onClick={onClick}
      sx={theme => {
        const border = `1px solid ${theme.palette.new.border.neutral.divider}`;
        return {
          p: 2,
          border,
          backgroundColor: 'background.default',
          borderRadius: '50%',
          '&:hover': { border },
          '&:focus-visible': { border },
          '&.Mui-disabled': { border },
        };
      }}
    >
      <Box
        component="img"
        src={getLogo(type)}
        alt={type}
        height={24}
        width={24}
        sx={
          type === 'Okta'
            ? {
                filter: theme =>
                  theme.palette.mode === 'dark' ? 'invert(1)' : 'none',
              }
            : undefined
        }
      />
    </IconButton>
    <Typography
      variant="globalXS"
      sx={{
        color: theme => theme.palette.new.text.neutral.lighter,
      }}
    >
      {type}
    </Typography>
  </Stack>
);

export default SSOButton;
