import { Box, Tooltip, Typography, useTheme } from '@mui/material';
import { Icon } from '@iconify/react';
import { isValidElement } from 'react';
import PropTypes from 'prop-types';
import noop from 'lodash/noop';
import { mergeSx } from '@arcblock/ux/lib/Util/style';
import { LOGIN_PROVIDER_ICON_SIZE } from '@arcblock/ux/lib/Util/constant';
import ArrowRightAltRoundedIcon from '@iconify-icons/material-symbols/arrow-right-alt-rounded';

export default function LoginMethodItem({
  isLatest = false,
  title,
  description = null,
  icon,
  iconScale = 0.95,
  slotProps = {},
  mode = 'normal',
  t = noop,
  ...rest
}) {
  const theme = useTheme();

  return (
    <Box
      {...rest}
      className="arc-login-item"
      sx={mergeSx(
        {
          position: 'relative',
          display: 'flex',
          alignItems: 'center',
          gap: 1,
          cursor: 'pointer',
          p: 1.2,
          borderRadius: 1,
          backgroundColor: isLatest ? 'grey.100' : 'grey.50',
          border: isLatest ? '1px solid' : 'none',
          borderColor: isLatest ? 'grey.100' : 'transparent',
          textDecoration: 'none',
          transition: 'background-color 0.5s',
          '&:hover, &:active, &.did-connect__choose-item__active': {
            backgroundColor: 'grey.100',
          },
          '& .other-item-icon': {
            opacity: '0',
            transform: 'translateX(-100%)',
            transition: 'transform 0.2s ease, opacity 0.1s ease',
          },
          '&:hover': {
            '& .other-item-icon': {
              display: 'inline-block',
              transform: 'translateX(0)',
              opacity: '1',
            },
          },
        },
        rest?.sx
      )}>
      <Tooltip title={title}>
        <Box
          className="arc-login-item__icon"
          sx={mergeSx(
            {
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              color: 'text.primary',
            },
            slotProps?.icon?.sx
          )}>
          {isValidElement(icon) ? (
            icon
          ) : (
            <Box
              component={Icon}
              icon={icon}
              sx={{
                transform: `scale(${iconScale})`,
                width: LOGIN_PROVIDER_ICON_SIZE,
                height: LOGIN_PROVIDER_ICON_SIZE,
              }}
            />
          )}
        </Box>
      </Tooltip>
      {mode === 'normal' ? (
        <>
          <Box className="arc-login-item__body" sx={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
            <Typography
              sx={{
                fontSize: 14,
                fontWeight: '500',
                color: 'text.primary',
                whiteSpace: 'nowrap',
              }}>
              {title}
            </Typography>
            {description ? (
              <Typography
                sx={{
                  color: 'text.secondary',
                  fontSize: 12,
                  lineHeight: 1,
                }}>
                {description}
              </Typography>
            ) : null}
          </Box>
          {isLatest ? (
            <Typography
              component="span"
              className="latest-badge"
              style={{ color: theme.palette.text.secondary, fontSize: 11 }}>
              {t('lastUsed')}
            </Typography>
          ) : (
            <Icon
              className="other-item-icon"
              icon={ArrowRightAltRoundedIcon}
              fontSize="1.3rem"
              color={theme.palette.primary.main}
            />
          )}
        </>
      ) : null}
    </Box>
  );
}

LoginMethodItem.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string,
  icon: PropTypes.any.isRequired,
  iconScale: PropTypes.number,
  slotProps: PropTypes.object,
  mode: PropTypes.oneOf(['mini', 'simple', 'normal']),
  isLatest: PropTypes.bool,
  t: PropTypes.func,
};
