import './topup.scss';

import React, { useEffect, useState } from 'react';

import Button from '../../../components/Button';
import ImageIcon from '../../../components/ImageIcon';
import Input from '../../../components/Input';
import Modal from '../../../components/Modal';
import { numberWithCommas } from '../../../utils/helperFunctions';

export interface TopupProp {
  visible: boolean;
  toggleVisible: (v: boolean) => void;
  successCB?: (result: any) => void;
  failCB?: (error: any) => void;
  completeCB?: () => void;
}

const moneylist = [
  { label: '2,000', value: 2000 },
  { label: '3,000', value: 3000 },
  { label: '5,000', value: 5000 },
  { label: '10,000', value: 10000 },
  { label: '30,000', value: 30000 },
  { label: '50,000', value: 50000 },
  { label: '100,000', value: 100000 },
];

enum TopupState {
  Topup = 0,
  SelectMoney,
  InputMoney,
  Charging,
  Done,
  Cancelled,
}

const Topup: React.FC<TopupProp> = (props) => {
  const { visible, toggleVisible } = props;
  const [state, setState] = useState<TopupState>(TopupState.Topup);
  const [money, setMoney] = useState(1000);

  useEffect(() => {
    if (visible) {
    } else {
      // restore all status here
      const timer = setTimeout(() => {
        setState(TopupState.Topup);
        setMoney(1000);
      }, 500);
      return () => clearTimeout(timer);
    }
  }, [visible]);

  const renderTopup = () => {
    const set = new Set([
      TopupState.Topup,
      TopupState.InputMoney,
      TopupState.Charging,
      TopupState.Done,
    ]);
    return set.has(state) ? (
      <>
        <div className="topup-charge">
          <div className="charge-select">チャージ金額を選択</div>
          {[TopupState.Topup, TopupState.Charging, TopupState.Done].indexOf(
            state
          ) > -1 ? (
            <div className="charge-money">
              {numberWithCommas(money)}
              <span className="unit">円</span>
            </div>
          ) : null}
          {renderInputMoney()}
          {renderChargeArea()}
        </div>
        {state === TopupState.Done ? (
          renderSuccessToast()
        ) : (
          <>
            <div className="topup-divider" />

            <div className="topup-money">
              <div className="topup-money-label-container">
                <span className="topup-money-label">チャージ方法</span>
              </div>
              <div className="topup-money-balance-container">
                <div>
                  <ImageIcon
                    className="topup-money-balance-icon"
                    src="ic-yj-card"
                    type="svg"
                  />
                </div>
                <div className="topup-money-detail">
                  <div>
                    <span className="topup-money-balance-label">
                      クレジットカード
                    </span>
                  </div>
                  <div>
                    <span className="topup-money-balance-number">**** 999</span>
                  </div>
                  <div>
                    <ImageIcon
                      src="check-green"
                      className="topup-money-card-auth"
                    />
                    <span className="topup-money-auth-name">本人認証済</span>
                  </div>
                </div>
                <div>
                  <ImageIcon
                    className="topup-money-next-icon"
                    src="iconArrowsmallrightSingle"
                  />
                </div>
              </div>
            </div>

            <div className="topup-btn-container">
              <Button
                className="btn-block"
                btnType="primary"
                loading={state === TopupState.Charging}
                onClick={chargeMoney}
              >
                {numberWithCommas(money)}円をチャージして支払う
              </Button>
            </div>
          </>
        )}
      </>
    ) : null;
  };

  const renderMoneyList = () => {
    return state === TopupState.SelectMoney ? (
      <div className="topup-money-list">
        <ul>
          {moneylist.map((item) => {
            return (
              <div
                role="button"
                tabIndex={0}
                key={item.label}
                onClick={() => {
                  setMoney(item.value);
                  setState(TopupState.Topup);
                }}
              >
                <li>
                  {item.label}
                  <span>円</span>
                </li>
              </div>
            );
          })}
        </ul>
      </div>
    ) : null;
  };
  const renderInputMoney = () => {
    return state === TopupState.InputMoney ? (
      <div className="charge-money charge-money-input">
        <Input
          type="number"
          pattern="/^-?\d+\.?\d*$/"
          value={money}
          min={1}
          max={100000000}
          onChange={(e) => setMoney(parseInt(e.target.value))}
        />
        <span className="charge-money-input-label-left">金額</span>
        <span className="charge-money-input-label-right">円</span>
      </div>
    ) : null;
  };
  const renderChargeArea = () => {
    return [TopupState.Charging, TopupState.Done].indexOf(state) === -1 ? (
      <div className="charge-area">
        <div
          className="money-number margin-right"
          role="button"
          tabIndex={-2}
          onClick={() => setMoney(1000)}
        >
          1,000
        </div>
        <div
          role="button"
          tabIndex={-2}
          onClick={() => setMoney(3000)}
          className="money-number margin"
        >
          3,000
        </div>
        <div
          role="button"
          tabIndex={-2}
          onClick={() => setMoney(10000)}
          className="money-number margin"
        >
          10,000
        </div>
        <div
          role="button"
          tabIndex={0}
          className="money-number money-more"
          onClick={() => setState(TopupState.SelectMoney)}
        >
          ...
        </div>
        <div
          className="money-number margin-left"
          role="button"
          tabIndex={-1}
          onClick={() => setState(TopupState.InputMoney)}
        >
          入力
        </div>
      </div>
    ) : null;
  };
  const handleBack = () => {
    if ([TopupState.InputMoney, TopupState.SelectMoney].indexOf(state) > -1) {
      setState(TopupState.Topup);
    } else if (state === TopupState.Topup) {
      toggleVisible && toggleVisible(false);
    }
  };
  const chargeMoney = async () => {
    setState(TopupState.Charging);
    await new Promise((r) => setTimeout(() => r(), 360));
    setState(TopupState.Done);
    await new Promise((r) => setTimeout(() => r(), 200));
    toggleVisible(false);
  };
  const renderSuccessToast = () => {
    return state === TopupState.Done ? (
      <div>
        <ImageIcon className="checkout-btn-success" src="green-tick" />
      </div>
    ) : null;
  };
  return (
    <Modal visible={visible}>
      <div className="topup">
        <div className="topup-header">
          <ImageIcon
            className="topup-close-icon"
            src="iconHalfsheetBack"
            onClick={handleBack}
          />
          <p className="topup-header-label">チャージ</p>
        </div>

        <div className="topup-divider" />
        {renderTopup()}
        {renderMoneyList()}
      </div>
    </Modal>
  );
};

export default Topup;