import PropTypes from 'prop-types'
import { useContext } from 'react'
import { Result, Typography, Flex } from 'antd'
import CopyButton from './CopyButton'
import RssIcon from '../../Icons/RssIcon'
import config from '../../../config'
import { AuthContext } from '../context/AuthContext'

const { Text } = Typography

const RSSFeedURL = ({ objectType }) => {
  const { userProfile } = useContext(AuthContext)
  const baseUrl = config.backendUrl?.replace(/\/$/, '') || ''
  const feedUsername = encodeURIComponent(userProfile?.username || 'USERNAME')
  const feedPassword = 'APP_PASSWORD'
  const rssUrl = `${baseUrl}/rss/${objectType}?u=${feedUsername}&p=${feedPassword}`

  return (
    <Flex vertical align='center'>
      <Result
        title='RSS Feed Connection'
        subTitle={
          <Text>
            Use this URL to subscribe from RSS readers or automation tools. An
            app password is required and can be configured in your user
            settings. Use your app password, not your account password.
          </Text>
        }
        icon={<RssIcon />}
      >
        <Flex justify='center' style={{ minWidth: '395px' }}>
          <Flex justify='center'>
            <Flex gap='small' align='center' justify='center'>
              <Text code style={{ fontSize: '14px', wordBreak: 'break-all' }}>
                {rssUrl}
              </Text>
              <CopyButton size='default' text={rssUrl} />
            </Flex>
          </Flex>
        </Flex>
      </Result>
    </Flex>
  )
}

RSSFeedURL.propTypes = {
  objectType: PropTypes.string.isRequired
}

export default RSSFeedURL