import PropTypes from 'prop-types'
import { Typography, Flex, Button, Tooltip } from 'antd'
import NewMailIcon from '../../Icons/NewMailIcon'
// import CopyIcon from './CopyIcon'
import CopyButton from './CopyButton'

const { Text, Link } = Typography

const EmailDisplay = ({ email, showCopy = true, showLink = false }) => {
  if (!email) return <Text type='secondary'>n/a</Text>

  return (
    <>
      <Flex>
        {showLink ? (
          <Link href={`mailto:${email}`} style={{ marginRight: 8 }}>
            {email}
          </Link>
        ) : (
          <>
            <Text style={{ marginRight: 8 }} ellipsis>
              {email}
            </Text>
            <Tooltip title='Email' arrow={false}>
              <Button
                icon={<NewMailIcon />}
                type='text'
                size='small'
                style={{ minWidth: 25 }}
                onClick={(e) => {
                  e.preventDefault()
                  window.location.href = `mailto:${email}`
                }}
              />
            </Tooltip>
          </>
        )}
        {showCopy && (
          <CopyButton
            text={email}
            tooltip='Copy Email'
            style={{ marginLeft: 0 }}
          />
        )}
      </Flex>
    </>
  )
}

EmailDisplay.propTypes = {
  email: PropTypes.string,
  showCopy: PropTypes.bool,
  showLink: PropTypes.bool
}

export default EmailDisplay