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

const { Text, Link } = Typography

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

  return (
    <>
      <Flex style={{ minWidth: 0 }}>
        {showLink ? (
          <Link
            href={url}
            target='_blank'
            rel='noopener noreferrer'
            style={{
              marginRight: 8,
              minWidth: 0,
              flex: 1,
              overflow: 'hidden',
              width: 0
            }}
          >
            <Text ellipsis style={{ display: 'block' }}>
              {url}
            </Text>
          </Link>
        ) : (
          <>
            <Text
              style={{ marginRight: 8, minWidth: 0, flex: 1, width: 0 }}
              ellipsis
            >
              {url}
            </Text>
            <Tooltip title='Open URL' arrow={false}>
              <Button
                icon={<LinkIcon />}
                type='text'
                size='small'
                style={{ minWidth: 25, flexShrink: 0 }}
                onClick={(e) => {
                  e.preventDefault()
                  window.open(url, '_blank', 'noopener,noreferrer')
                }}
              />
            </Tooltip>
          </>
        )}
        {showCopy && (
          <CopyButton
            text={url}
            tooltip='Copy URL'
            style={{ marginLeft: 0 }}
            iconStyle={{ fontSize: '14px' }}
          />
        )}
      </Flex>
    </>
  )
}

UrlDisplay.propTypes = {
  url: PropTypes.string,
  showCopy: PropTypes.bool,
  showLink: PropTypes.bool
}

export default UrlDisplay