import PropTypes from 'prop-types'
import { Result, Typography, Flex } from 'antd'
import CopyButton from './CopyButton'
import ODataIcon from '../../Icons/ODataIcon'
import config from '../../../config'

const { Text } = Typography

const ODataURL = ({ objectType }) => {
  const baseUrl = config.backendUrl?.replace(/\/$/, '') || ''
  const odataUrl = `${baseUrl}/odata/${objectType}`

  return (
    <Flex vertical align='center'>
      <Result
        title='OData Connection'
        subTitle={
          <Text>
            Use this URL to connect Power BI, Excel, or other OData clients. An
            app password is required and can be configured in your user
            settings.
          </Text>
        }
        icon={<ODataIcon />}
      >
        <Flex justify='center' style={{ minWidth: '395px' }}>
          <Flex justify='center'>
            <Flex gap='small' align='center' justify='center'>
              <CopyButton size='default' text={odataUrl} />
              <Text code style={{ fontSize: '14px', wordBreak: 'break-all' }}>
                {odataUrl}
              </Text>
            </Flex>
          </Flex>
        </Flex>
      </Result>
    </Flex>
  )
}

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

export default ODataURL