import PropTypes from 'prop-types'
import React, { Component } from 'react'
import ConnectedSitesList from '../../components/app/connected-sites-list'
import Popover from '../../components/ui/popover/popover.component'
import Button from '../../components/ui/button'

export default class ConnectedSites extends Component {
  static contextTypes = {
    t: PropTypes.func,
  }

  static defaultProps = {
    tabToConnect: null,
  }

  static propTypes = {
    accountLabel: PropTypes.string.isRequired,
    closePopover: PropTypes.func.isRequired,
    connectedDomains: PropTypes.arrayOf(PropTypes.object).isRequired,
    domainHostCount: PropTypes.objectOf(PropTypes.number).isRequired,
    disconnectAllAccounts: PropTypes.func.isRequired,
    disconnectAccount: PropTypes.func.isRequired,
    getOpenMetamaskTabsIds: PropTypes.func.isRequired,
    permittedAccountsByOrigin: PropTypes.objectOf(
      PropTypes.arrayOf(PropTypes.string),
    ).isRequired,
    tabToConnect: PropTypes.object,
    requestAccountsPermission: PropTypes.func.isRequired,
  }

  state = {
    sitePendingDisconnect: null,
  }

  componentDidMount () {
    const { getOpenMetamaskTabsIds } = this.props
    getOpenMetamaskTabsIds()
  }

  setPendingDisconnect = (domainKey) => {
    this.setState({
      sitePendingDisconnect: {
        domainKey,
      },
    })
  }

  clearPendingDisconnect = () => {
    this.setState({
      sitePendingDisconnect: null,
    })
  }

  disconnectAccount = () => {
    const { disconnectAccount } = this.props
    const { sitePendingDisconnect } = this.state

    disconnectAccount(sitePendingDisconnect.domainKey)
    this.clearPendingDisconnect()
  }

  disconnectAllAccounts = () => {
    const { disconnectAllAccounts } = this.props
    const { sitePendingDisconnect } = this.state

    disconnectAllAccounts(sitePendingDisconnect.domainKey)
    this.clearPendingDisconnect()
  }

  renderConnectedSitesList () {
    return (
      <ConnectedSitesList
        domainHostCount={this.props.domainHostCount}
        connectedDomains={this.props.connectedDomains}
        onDisconnect={this.setPendingDisconnect}
      />
    )
  }

  renderConnectedSitesPopover () {
    const {
      accountLabel,
      closePopover,
      connectedDomains,
      tabToConnect,
      requestAccountsPermission,
    } = this.props
    const { t } = this.context

    return (
      <Popover
        className="connected-sites"
        title={t('connectedSites')}
        subtitle={connectedDomains.length
          ? t('connectedSitesDescription', [accountLabel])
          : t('connectedSitesEmptyDescription', [accountLabel])
        }
        onClose={closePopover}
        footer={
          tabToConnect
            ? (
              <a
                className="connected-sites__text-button"
                onClick={requestAccountsPermission}
              >
                {t('connectManually')}
              </a>
            )
            : null
        }
        footerClassName="connected-sites__add-site-manually"
      >
        {this.renderConnectedSitesList()}
      </Popover>
    )
  }

  renderDisconnectPopover () {

    const { closePopover, permittedAccountsByOrigin } = this.props
    const { t } = this.context
    const { sitePendingDisconnect: { domainKey } } = this.state

    const numPermittedAccounts = permittedAccountsByOrigin[domainKey].length

    return (
      <Popover
        className="connected-sites"
        title={t('disconnectPrompt', [domainKey])}
        subtitle={t('disconnectAllAccountsConfirmationDescription')}
        onClose={closePopover}
        footer={(
          <>
            <div className="connected-sites__footer-row">
              <Button type="secondary" onClick={this.clearPendingDisconnect}>
                { t('cancel') }
              </Button>
              <Button
                type="primary"
                onClick={this.disconnectAccount}
              >
                { t('disconnect') }
              </Button>
            </div>
            {
              numPermittedAccounts > 1
                ? (
                  <div className="connected-sites__footer-row">
                    <a
                      className="connected-sites__text-button"
                      onClick={this.disconnectAllAccounts}
                    >
                      {t('disconnectAllAccounts')}
                    </a>
                  </div>
                )
                : null
            }
          </>
        )}
        footerClassName="connected-sites__confirmation"
      />
    )
  }

  render () {
    const { sitePendingDisconnect } = this.state
    return (
      sitePendingDisconnect
        ? this.renderDisconnectPopover()
        : this.renderConnectedSitesPopover()
    )
  }
}