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

export default D.declare('view.page.Login', () => {
    const loginStore = new Store({
       phone: '7',
       code: '',
       active: 'enterPhone',
        phoneValid: false
    });
    loginStore.sub('phone', function (phone) {
       loginStore.set('phoneValid', phone.length === 11);
    });
    return <div className={"login-page"}>
        <div class="login-page__big-logo">
            <Logo width="660" height="300"/>
        </div>
        {view.cmp.Switch({store: loginStore, key: 'active'}, {
            enterPhone: [
                <view.cmp.field.LabeledField label={'Login'} bind={loginStore.bind('phone')}/>,
                <button
                    onclick={()=>loginStore.set('active', 'enterCode')}
                    disabled={_=>loginStore.equal('phoneValid', false, _)}
                >Ага</button>
            ],
            enterCode: [
                <button onClick={() => loginStore.set('active', 'enterPhone')}>Взат</button>,
                <view.cmp.field.LabeledField label={'Code'}/>
            ]
        })}

        <button type={'button'} onclick={() => store.set('navigation.current', 'main')}>To account</button>
    </div>
})
