import { Typography } from '@mui/material';
import isUndefined from 'lodash/isUndefined';

import logo from './images/abtwallet.png';
import { mergeProps } from '../Util';
import colors from '../Colors';
import Button from '../Button';
import { styled } from '../Theme';

export interface WalletActionProps {
  action?: string;
  size?: 'xlarge' | 'large' | 'medium' | 'small';
  textLayout?: 'vertical' | 'horizontal';
  style?: React.CSSProperties;
}

export default function WalletAction(rawProps: WalletActionProps) {
  const props = Object.assign({}, rawProps);
  // eslint-disable-next-line react/prop-types
  if (isUndefined(props.action)) {
    props.action = 'Login';
  }
  // eslint-disable-next-line react/prop-types
  if (isUndefined(props.textLayout)) {
    props.textLayout = 'vertical';
  }
  // eslint-disable-next-line react/prop-types
  if (isUndefined(props.size)) {
    props.size = 'medium';
  }
  // eslint-disable-next-line react/prop-types
  if (isUndefined(props.style)) {
    props.style = {};
  }
  const newProps = mergeProps(props, WalletAction, ['style']);
  const { action, size, textLayout, style = {}, ...rest } = newProps;
  const styles = Object.assign({}, style, { border: 'none', padding: 0 });

  return (
    <Button style={styles} {...rest} variant="outlined">
      <Content size={size} color={styles.color}>
        <img src={logo} className="wallet-action__logo" alt="DID Wallet" />
        {textLayout === 'vertical' && (
          <Typography className="wallet-action__text" component="div">
            <span className="wallet-action__action">{action} with</span>
            <span className="wallet-action__title">DID Wallet</span>
          </Typography>
        )}
        {textLayout === 'horizontal' && (
          <span className="wallet-action__title" style={{ padding: 8 }}>
            {action} with DID Wallet
          </span>
        )}
      </Content>
    </Button>
  );
}

const sizes = {
  logo: {
    small: 32,
    medium: 44,
    large: 56,
    xlarge: 88,
  },
  font: {
    small: 9,
    medium: 11,
    large: 13,
    xlarge: 18,
  },
};

type ContentProps = {
  size: NonNullable<WalletActionProps['size']>;
  color: string;
};

const Content = styled('div')<ContentProps>`
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
    opacity: 0.9;
  }

  .wallet-action__logo {
    width: auto;
    height: auto;
    max-width: ${(props) => sizes.logo[props.size]}px;
    margin-left: 5px;
  }

  .wallet-action__text {
    padding: 8px;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .wallet-action__action {
    font-size: ${(props) => sizes.font[props.size]}px;
    text-transform: capitalize;
    margin-bottom: 1px;
    color: ${(props) => props.color || colors.primary.main};
    letter-spacing: 1px;
  }

  .wallet-action__title {
    font-size: ${(props) => sizes.font[props.size] * 1.5}px;
    text-transform: capitalize;
    color: ${(props) => props.color || colors.primary.main};
    letter-spacing: 1px;
  }
`;
