import { Button, Form, Input } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { loginStart } from "../../redux/tech/tech.actions";
import {
  selectLoginError,
  selectTechnician,
} from "../../redux/tech/tech.selectors";
import "./tech-login.styles.scss";

const mapStateToProps = createStructuredSelector({
  technician: selectTechnician,
  loginError: selectLoginError,
});

const mapDispatchToProps = (dispatch) => ({
  loginStart: (user) => dispatch(loginStart(user)),
});

export function TechLogin({ technician, loginError, loginStart }) {
  const { t } = useTranslation();
  const handleFinish = (values) => {
    loginStart(values);
  };
  return (
    <div className='tech-login-container'>
      <Form onFinish={handleFinish}>
        <Form.Item
          label={t("tech.fields.username")}
          name='date'
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}>
          <Input size='large' />
        </Form.Item>
        <Form.Item
          label={t("tech.fields.password")}
          name='date'
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}>
          <Input.Password size='large' />
          <Button htmlType='submit' className='login-btn'>
            {t("general.actions.login")}
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
export default connect(mapStateToProps, mapDispatchToProps)(TechLogin);