import './method.scss';

import React, { useState } from 'react';

import Icon from '../../../components/Icon/icon';
import ImageIcon from '../../../components/ImageIcon/imageIcon';
import i18n from '../../../i18n';

interface Props {
  backCB: () => void;
}

const Method: React.FC<Props> = (props) => {
  const { backCB } = props;
  const [isReload] = useState(false);
  const renderReload = () => {
    return isReload ? (
      <>
        <div>
          <ImageIcon src="imageUpdate" />
        </div>
        <div>
          <span>{i18n.t('method.failed')}</span>
        </div>
        <div className="method-refresh">
          <span>{i18n.t('method.reload')}</span>
          <ImageIcon className="refresh-icon" src="iconRefresh" />
        </div>
      </>
    ) : null;
  };
  return (
    <div className="method">
      <div className="method-header">
        <ImageIcon
          onClick={() => backCB()}
          className="method-close-icon"
          src="iconHalfsheetBack"
        />
        <p className="method-header-label">{i18n.t('method.selectmethod')}</p>
      </div>

      <div className="method-divider" />

      {renderReload()}
      <ul>
        <li>
          <div className="method-list-container">
            <div className="method-list-selected">
              <ImageIcon
                className="selected-size"
                src="iconPaymenthistorySelected"
              />
            </div>
            <div className="method-list-method-icon">
              <ImageIcon className="method-icon-size" src="imgBalance" />
            </div>
            <div className="method-list-text">
              <div>
                <span className="text-balance">{i18n.t('method.balance')}</span>
              </div>
              <div>
                <span className="balance-number">
                  {i18n.t('method.availamt')}
                </span>
              </div>
            </div>
            <div className="method-list-action">
              <Icon theme="primary" icon="plus-circle" className="icon-sizes" />
            </div>
          </div>
        </li>

        <li>
          <div className="method-list-container">
            <div className="method-list-selected">
              {/* <ImageIcon
                className="selected-size"
                src="iconPaymenthistorySelected"
              /> */}
            </div>
            <div className="method-list-method-icon">
              <ImageIcon className="method-icon-size" src="imgPaylater" />
            </div>
            <div className="method-list-text">
              <div>
                <span className="text-balance">
                  {i18n.t('method.deferamt')}
                </span>
              </div>
              <div>
                <span className="balance-number">
                  {i18n.t('method.availbal')}
                </span>
              </div>
            </div>
            {/* <div className="method-list-action">
              <Icon theme="primary" icon="plus-circle" className="icon-sizes" />
            </div> */}
          </div>
        </li>

        <li>
          <div className="method-list-container">
            <div className="method-list-selected">
              {/* <ImageIcon
                className="selected-size"
                src="iconPaymenthistorySelected"
              /> */}
            </div>
            <div className="method-list-method-icon">
              <ImageIcon
                className="method-icon-size"
                src="ic-payment-visa"
                type="svg"
              />
            </div>
            <div className="method-list-text">
              <div>
                <span className="text-balance">{i18n.t('method.cc')}</span>
              </div>
              <div>
                <span className="balance-number">**** 9999</span>
              </div>
              <div>
                <ImageIcon src="check-green" className="card-auth" />
                <span className="auth-name">
                  {i18n.t('method.authenticate')}
                </span>
              </div>
            </div>
            {/* <div className="method-list-action">
              <Icon theme="primary" icon="plus-circle" className="icon-sizes" />
            </div> */}
          </div>
        </li>

        <li>
          <div className="method-list-container">
            <div className="method-list-selected">
              {/* <ImageIcon
                className="selected-size"
                src="iconPaymenthistorySelected"
              /> */}
            </div>
            <div className="method-list-method-icon">
              <ImageIcon
                className="method-icon-size"
                src="ic-yj-card"
                type="svg"
              />
            </div>
            <div className="method-list-text">
              <div>
                <span className="text-balance">
                  {i18n.t('method.yahoocard')}
                </span>
              </div>
              <div>
                <span className="balance-number">**** 9999</span>
              </div>
              <div>
                <ImageIcon src="check-green" className="card-auth" />
                <span className="auth-name">
                  {i18n.t('method.authenticate')}
                </span>
              </div>
            </div>
            {/* <div className="method-list-action">
              <Icon theme="primary" icon="plus-circle" className="icon-sizes" />
            </div> */}
          </div>
        </li>
      </ul>
    </div>
  );
};

Method.defaultProps = {
  backCB: () => {},
};

export default Method;