/*
 * Copyright (c) 2022 @automata-network/wallet-sdk authors and contributors.
 * This software may be modified and distributed under the terms of UNLICENSED
 * license. Refer to the LICENSE file for details.
 */
import React from 'react'

import { useWallet } from '../../store/wallet'
import { Modal } from '../Modal/Modal'

export interface ConnectorItem {
  label: string
  icon: string
  enabled: boolean
  link?: string
}

interface ConnectorProps {
  loading: boolean
  error?: Error
  items: ConnectorItem[]
  onSelect: (index: number) => void
  onClose: () => void
}

export const Connector: React.FC<ConnectorProps> = (props) => {
  const { loading, error, items, onSelect, onClose } = props
  const { prefixCls } = useWallet()

  return (
    <Modal
      closeOnOverlayClick
      classNames={{ modal: `${prefixCls}connectorModal` }}
      title="Available Wallets"
      open={true}
      onClose={onClose}
    >
      {loading ? (
        <div></div>
      ) : error ? (
        <div></div>
      ) : items.length ? (
        <div className={`${prefixCls}connectorExtensionContainer`}>
          {items.map((item, index) => {
            const { enabled, icon, label, link } = item
            return (
              <div
                key={label}
                role="presentation"
                className={[
                  `${prefixCls}connectorExtension`,
                  enabled ? `${prefixCls}connectorExtensionClickable` : ''
                ].join(' ')}
                onClick={() => {
                  if (enabled) {
                    onSelect(index)
                  }
                }}
              >
                <img
                  className={`${prefixCls}connectorExtensionIcon`}
                  src={icon}
                  alt={`${label} icon`}
                />
                <div className={`${prefixCls}connectorExtensionLabel`}>{label}</div>
                {!enabled ? (
                  <a className={`${prefixCls}connectorExtensionLink`} href={link} target="_blank">
                    Install
                  </a>
                ) : null}
              </div>
            )
          })}
        </div>
      ) : (
        <div>You don't have any wallets</div>
      )}
    </Modal>
  )
}