import '../../cmp/field/LabeledField.jsx';
import Button from '../../cmp/button/Button.jsx';
import Logo from '../../../svg/logo_vkusvill.svg';
import './loginPage.scss';

import Arr  from '../../../svg/arr.svg';
import ArrB  from '../../../svg/arr-back.svg';
import {AsyncAjax} from '/core/Ajax.jsx';
import {API} from '/dict/Consts.jsx';

const {AND, OR, IF} = Store;
export default D.declare('view.page.Login', () => {
    const loginStore = new Store({
        phone: '79991112233',
        code: '',
        codeValid: false,
        active: 'enterPhone',
        phoneValid: false,
        phoneChecking: false,
        incorrectPhone: false,
        displayHelpPage: false,
        codeError: false
    });
    loginStore.sub('phone', function (phone) {
       loginStore.set('phoneValid', phone.length === 11);
    });
    loginStore.sub('code', function (code) {
        loginStore.set('codeValid', (code+'').length === 6);
    });
    const checkPhone = async function() {
      loginStore.set('phoneChecking', true);
      try{
        const result = await AsyncAjax.post( API.ENDPOINTS.CHECK_CODE, data );
        console.log(result)
      }catch( e ){

      }
      setTimeout(function() {
        loginStore.set('phoneChecking', false);
        loginStore.set('active', 'enterCode');
      }, 2000)
    };
    const checkCode = function () {
        loginStore.set('codeChecking', true);
        setTimeout(function() {
            loginStore.set('codeChecking', false);
            loginStore.set('codeError', true);
        }, 2000)
    };


    return <div className={"login-page"}>
        <div class="login-page__big-logo">
            <Logo width="660" height="300"/>
        </div>

        <IF condition={loginStore.valTrue('displayHelpPage')}>
            <div className={"login-page__back-link"}>
                <Button onClick={() => loginStore.set( 'displayHelpPage', false )} type={"button"}>
                    <ArrB width="17" height="11"/><span>Вернуться к авторизации</span>
                </Button>
            </div>
            <h2 className="login-page__headline">Проблемы с авторизацией?</h2>
            <div className="login-page__text">
                <p>Текст про&nbsp;то, куда писать и&nbsp;звонить Текст про&nbsp;то, куда писать и&nbsp;звонить, текст
                    про&nbsp;то, куда писать и&nbsp;звонить</p>
            </div>
            <a href="tel:88000000000" className="login-page__support">8 800 000 00 00</a>
        </IF>

        <IF condition={loginStore.valFalse('displayHelpPage')}>
            <h1 className="login-page__title">Добро пожаловать в&nbsp;развивающую платформу Вкусвилл!</h1>
            <form action="#" method="post" className="authorization-form">
                <Switch store={loginStore} key='active' content={{
                enterPhone: <>
                    <view.cmp.field.LabeledField required type={'tel'} bind={loginStore.bind('phone')}
                      label={'Введите номер телефона, чтобы продолжить.'}
                      disabled={loginStore.valTrue('phoneChecking')}
                      placeholder={'Ваш телефон'} />
                    <Button class={"button button--primary authorization-form__button"}
                      type={"button"} onclick={checkPhone}
                      disabled={OR(
                        loginStore.valFalse('phoneValid'),
                        loginStore.valTrue('phoneChecking')
                      )}>
                        <span>Далее</span><Arr width="17" height="11"/>
                    </Button>
                </>,
                enterCode: <>
                    <view.cmp.field.LabeledField required label={'Введите код из СМС'}
                      placeholder={'Код'} type={'number'}
                      disabled={loginStore.valTrue('codeChecking')}
                      bind={loginStore.bind('code')}
                      invalid={loginStore.valTrue('codeError')}>
                        <IF condition={loginStore.valTrue('codeError')}>
                            <span className={"labeled-field__error-message"}>Некорректный код. Попробуйте еще раз</span>
                        </IF>
                    </view.cmp.field.LabeledField>

                    <Button class={"button button--primary authorization-form__button"}
                      type={"button"} onclick={checkCode}
                      disabled={OR(
                        loginStore.valFalse('codeValid'),
                        loginStore.valTrue('codeChecking')
                      )}>
                        <span>Далее</span><Arr width="17" height="11"/>
                    </Button>
                </>
                }}/>
                <Button onClick={() => loginStore.set('displayHelpPage', true)} type={"button"}>Проблемы с авторизацией?</Button>
            </form>
        </IF>
    </div>
})
