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

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

  return (
    <Box
      {...rest}
      sx={mergeSx(
        {
          display: 'flex',
          alignItems: 'center',
          gap: 1,
          cursor: 'pointer',
          p: 1,
          borderRadius: 1,
          backgroundColor: 'grey.50',
          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
      )}>
      <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: 24,
              height: 24,
            }}
          />
        )}
      </Box>
      {mode === 'normal' ? (
        <>
          <Box 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>
          <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(['simple', 'normal']),
};