import React, {useMemo} from 'react';
import styled from 'styled-components';
import useTokenBalance from '../../hooks/useTokenBalance';
import {getDisplayBalance} from '../../utils/formatBalance';

import Label from '../Label';
import Modal, {ModalProps} from '../Modal';
import ModalTitle from '../ModalTitle';
import useUnicornFinance from '../../hooks/useUnicornFinance';
import TokenSymbol from '../TokenSymbol';
import {useMediaQuery} from '@material-ui/core';

const AccountModal: React.FC<ModalProps> = ({onDismiss}) => {
  const unicornFinance = useUnicornFinance();

  const unicornBalance = useTokenBalance(unicornFinance.UNICORN);
  const displayUnicornBalance = useMemo(() => getDisplayBalance(unicornBalance), [unicornBalance]);

  const wingsBalance = useTokenBalance(unicornFinance.WINGS);
  const displayWingsBalance = useMemo(() => getDisplayBalance(wingsBalance), [wingsBalance]);

  const magicbondBalance = useTokenBalance(unicornFinance.MAGICBOND);
  const displayMagicbondBalance = useMemo(() => getDisplayBalance(magicbondBalance), [magicbondBalance]);

  const matches = useMediaQuery('(min-width:900px)');

  return (
    <Modal>
      <ModalTitle text="My Wallet" />

      <Balances style={{display: 'flex', flexDirection: matches ? 'row' : 'column'}}>
        <StyledBalanceWrapper style={{paddingBottom: '15px'}}>
          <TokenSymbol symbol="UNICORN" />
          <StyledBalance>
            <StyledValue>{displayUnicornBalance}</StyledValue>
            <Label text="UNICORN Available" />
          </StyledBalance>
        </StyledBalanceWrapper>

        <StyledBalanceWrapper style={{paddingBottom: '15px'}}>
          <TokenSymbol symbol="WINGS" />
          <StyledBalance>
            <StyledValue>{displayWingsBalance}</StyledValue>
            <Label text="WINGS Available" />
          </StyledBalance>
        </StyledBalanceWrapper>

        <StyledBalanceWrapper style={{paddingBottom: '15px'}}>
          <TokenSymbol symbol="MAGICBOND" />
          <StyledBalance>
            <StyledValue>{displayMagicbondBalance}</StyledValue>
            <Label text="MAGICBOND Available" />
          </StyledBalance>
        </StyledBalanceWrapper>
      </Balances>
    </Modal>
  );
};

const StyledValue = styled.div`
  //color: ${(props) => props.theme.color.grey[300]};
  font-size: 30px;
  font-weight: 700;
`;

const StyledBalance = styled.div`
  align-items: center;
  display: flex;
  flex-direction: column;
`;

const Balances = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: ${(props) => props.theme.spacing[4]}px;
`;

const StyledBalanceWrapper = styled.div`
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0 ${(props) => props.theme.spacing[3]}px;
`;

export default AccountModal;