import React, { useState } from 'react'
import PropTypes from 'prop-types'
import { Typography, Tooltip, Button } from 'antd'
import CopyButton from './CopyButton'
import EyeIcon from '../../Icons/EyeIcon'
import EyeSlashIcon from '../../Icons/EyeSlashIcon'

const { Text } = Typography

const SecretDisplay = ({ value, reveal = false }) => {
  const [visible, setVisible] = useState(false)

  if (!value) {
    return <Text type='secondary'>n/a</Text>
  }

  const masked = '•'.repeat(Math.max(8, value.length))

  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
      <Text code>{reveal && visible ? value : masked}</Text>
      {reveal && (
        <Tooltip title={visible ? 'Hide' : 'Show'} arrow={false}>
          <Button
            type='text'
            icon={visible ? <EyeSlashIcon /> : <EyeIcon />}
            onClick={() => setVisible((v) => !v)}
            size='small'
            aria-label={visible ? 'Hide secret' : 'Show secret'}
          />
        </Tooltip>
      )}
      {reveal && value && (
        <CopyButton
          text={value}
          tooltip='Copy Secret'
          style={{ marginLeft: 0 }}
          iconStyle={{ fontSize: '14px' }}
        />
      )}
    </span>
  )
}

SecretDisplay.propTypes = {
  value: PropTypes.string,
  reveal: PropTypes.bool
}

export default SecretDisplay