/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/accessible-emoji */
import React, { useState, useEffect } from 'react';
import Axios from 'axios';
import Flexbox from 'flexbox-react';
import { useRouter } from 'next/router';
import ReactCodeInput from 'react-code-input';
import MoonLoader from 'react-spinners/MoonLoader';
import { IoIosArrowForward } from 'react-icons/io';

import * as S from './styles';

const VerifyContainer = () => {
  const [code, setCode] = useState('');
  const { query, back, push } = useRouter();
  const [loading, setLoading] = useState(false);
  const { userId, country, phoneNumber } = query;
  useEffect(() => {
    const verify = async () => {
      if (!loading) {
        setLoading(true);
        const { error } = await Axios.post(`${process.env.API_STAGING}/verify`, {
          code: Number(code),
          country,
          userId,
          provider: process.env.CHALLENGE_PROVIDER,
        });
        if (!error) {
          setLoading(false);
          push({
            pathname: '/sign-up',
            query: {
              userId,
              country,
            },
          });
        }
      }
    };
    if (`${code}`.length === 4) verify();
  }, [code]);
  return (
    <div style={{ padding: '20px', backgroundColor: '#000f1f', height: '100%' }}>
      <div
        style={{
          color: '#fff',
          border: 'none',
          background: 'none',
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
          fontFamily: 'CooperHewitt',
          fontWeight: 'bold',
          fontSize: '14px',
          marginTop: '5px',
        }}
        onClick={() => back()}
      >
        back
      </div>
      <div>
        <h1 style={{
          color: '#FFFFFF',
          marginTop: '40px',
          marginBottom: '5px',
        }}
        >
          Enter SMS code
          {' '}
          📲
        </h1>
        <span style={{
          display: 'block',
          color: '#FFFFFF',
          maxWidth: '240px',
        }}
        >
          We&#39;ve sent you confirmation code on
          {' '}
          <b>{phoneNumber}</b>
        </span>
      </div>
      <Flexbox justifyContent="space-between" alignItems="center" marginTop="15vh" padding="0 10px">
        <S.CodeInputWrapper>
          <ReactCodeInput
            type="number"
            inputMode="tel"
            fields={4}
            value=""
            inputStyle={{
              width: '30px',
              margin: '2px',
              padding: '2px',
              color: '#FFFFFF',
              fontSize: '44px',
              borderTop: 'none',
              borderLeft: 'none',
              lineHeight: '48px',
              borderRight: 'none',
              textAlign: 'center',
              fontStyle: 'normal',
              fontWeight: 'normal',
              fontFamily: 'Norwester',
              backgroundColor: '#000f1f',
              transition: 'border-color 0.3s ease',
              borderBottom: `4px solid ${code.length === 6 ? '#40BF63' : '#203246'}`,
            }}
            isValid
            autoFocus
            onChange={(value) => setCode(value)}
          />
        </S.CodeInputWrapper>
        {loading && (
          <MoonLoader
            loading
            size={30}
            color="#fff"
          />
        )}
      </Flexbox>
      {/* <div onClick={() => resendCode()}>
        Resend passcode
      </div> */}
    </div>
  );
};


VerifyContainer.propTypes = {

};

export default VerifyContainer;