import PropTypes from 'prop-types'
import { Result, Typography, Flex, Button } from 'antd'
import CopyButton from '../../common/CopyButton'
import MarketplaceIcon from '../../../Icons/MarketplaceIcon'
import { getMarketplaceCallbackUrl } from './authUtils'

const { Text } = Typography

const ConfigureMarketplace = ({
  onConnect,
  isConnected = false,
  loading = false,
  disabled = false
}) => {
  const callbackUrl = getMarketplaceCallbackUrl()

  return (
    <Flex vertical align='center'>
      <Result
        title='Marketplace Connection'
        subTitle={
          <Text>
            Use this callback URL for TikTok Shop redirects and as the eBay
            RuName accept URL target. Click Connect to authorize your
            marketplace account.
          </Text>
        }
        icon={<MarketplaceIcon />}
      >
        <Flex
          vertical
          gap='middle'
          align='center'
          style={{ minWidth: '395px' }}
        >
          <Flex justify='center'>
            <Flex gap='small' align='center' justify='center'>
              <CopyButton size='default' text={callbackUrl} />
              <Text code style={{ fontSize: '14px', wordBreak: 'break-all' }}>
                {callbackUrl}
              </Text>
            </Flex>
          </Flex>
          <Flex justify='center'>
            <Button
              type='primary'
              onClick={onConnect}
              loading={loading}
              disabled={disabled}
              key='connect'
            >
              {isConnected ? 'Reconnect' : 'Connect'}
            </Button>
          </Flex>
        </Flex>
      </Result>
    </Flex>
  )
}

ConfigureMarketplace.propTypes = {
  onConnect: PropTypes.func,
  isConnected: PropTypes.bool,
  loading: PropTypes.bool,
  disabled: PropTypes.bool
}

export default ConfigureMarketplace