import { useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import {
  Button,
  Card,
  Col,
  Form,
  InputNumber,
  Row,
  Spin,
  TimePicker,
} from 'antd';
import moment from 'moment';
import { useStore } from 'stores/StoreProvider';
import { useSettingsMessages } from './i18n';
import { openNotificationSuccess } from 'components/Messages';

export const Authentication = observer((): JSX.Element => {
  const [form] = Form.useForm();
  const translations = useSettingsMessages();

  const {
    settingsAuthentication,
    getSettingsAuthentication,
    patchSettingsAuthentication,
    loading,
  } = useStore().settingsUiStore;

  useEffect(() => {
    getSettingsAuthentication();
  }, [getSettingsAuthentication]);

  useEffect(() => {
    if (settingsAuthentication)
      form.setFieldsValue({
        login_attempts_limit: settingsAuthentication.login_attempts_limit,
        login_block_timeout: moment(
          settingsAuthentication.login_block_timeout,
          'HH:mm:ss',
        ),
      });
  }, [form, settingsAuthentication]);

  const onFinish = (values: any): void => {
    patchSettingsAuthentication(values).then(() => {
      openNotificationSuccess({
        messageTitle: translations.notification.savedSuccess,
      });
    });
  };
  const content = (
    <Card
      style={{ borderLeft: 0 }}
      title={
        <div>
          <span style={{ marginRight: 15 }}>
            {translations.authentication.cardTitleAuthentication}
          </span>
        </div>
      }
    >
      <Form layout="vertical" form={form} onFinish={onFinish}>
        <Row gutter={[12, 12]}>
          <Col className="gutter-row" span={12}>
            <Form.Item
              label={translations.authentication.limitingLogin}
              key="login_attempts_limit"
              name="login_attempts_limit"
              rules={[
                {
                  required: true,
                  message: translations.validation.fieldNotEmpty,
                },
              ]}
              extra={translations.authentication.limitingLoginExtra}
            >
              <InputNumber
                style={{ width: '100%' }}
                max={100}
                min={0}
                precision={0}
              />
            </Form.Item>
          </Col>
          <Col className="gutter-row" span={12}>
            <Form.Item
              label={translations.authentication.authenticationTimeout}
              key="login_block_timeout"
              name="login_block_timeout"
              rules={[
                {
                  required: true,
                  message: translations.validation.fieldNotEmpty,
                },
              ]}
              extra={translations.authentication.authenticationTimeoutExtra}
            >
              <TimePicker
                style={{ width: '100%' }}
                showNow={false}
                value={moment('00:00:00', 'HH:mm:ss')}
              />
            </Form.Item>
          </Col>
        </Row>
        <Form.Item key="submitButton">
          <Button htmlType="submit" type="primary">
            {translations.button.save}
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
  return loading ? <Spin className="spinnerGlobal">{content}</Spin> : content;
});
