import { PikButton, PikCheckbox, PikErrorBoundary } from 'common/components';
import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
import { LoginAlert } from 'pages/PageLogin/login-alert';
import React from 'react';
import { RouteComponentProps } from 'react-router';
import { Inject } from 'utils/di';
import { PikRouter } from 'utils/pik-router';
import { ErrorComponent } from './error-component';

@observer
export class PageLogin extends React.Component<RouteComponentProps<{}>> {
  @observable isCheckedValue: boolean = true;
  @Inject(PikRouter) pikRouter: PikRouter;

  constructor(props: RouteComponentProps<{}>) {
    super(props);
  }

  navToDashboard = () => {
    this.pikRouter.navToDashboard(5);
  };

  @action.bound
  showAlert = () => {
    // LoginAlert.showAlert();
    this.isCheckedValue = !this.isCheckedValue;
    // console.log('​showAlert -> this.isCheckedValue', this.isCheckedValue);
  };

  render(): React.ReactNode {
    const my = true;

    return (
      <div>
        Страничка логина
        <button onClick={this.navToDashboard}>На дашборд!</button>
        <PikErrorBoundary>
          <ErrorComponent />
        </PikErrorBoundary>
        <PikButton onClick={this.showAlert}>Oppa</PikButton>
        <PikCheckbox
          id="2"
          name="smsNewReceipt"
          // checkboxValue={this.isCheckedValue}
          defaultValue={this.isCheckedValue}
          // defaultChecked={this.isCheckedValue}
          // value={this.isCheckedValue}
          // checked={this.isCheckedValue}
          onChange={(name, value) => {
            console.log('Changed', name, value);
          }}
        >
          SMS о формировании новой квитанции (15 числа каждого месяца)
        </PikCheckbox>
        <PikCheckbox
          id="3"
          name="smsANYREWQ"
          defaultValue={this.isCheckedValue}
          onChange={(name, value) => {
            console.log('Changed', name, value);
          }}
        >
          SMS другая
        </PikCheckbox>
        <span>Hello</span>
        <br />
      </div>
    );
  }
}