import { AppDispatch } from "app/store";
import React, { useCallback } from "react";
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";
import { getTranslationID } from "translation";
import { changePageState } from "features/signup/signupSlice";
import styles from "styles/app.module.scss";
import { COUNTRY_LIST } from "./constants";

import {
  selectCompany,
  selectCountry,
  selectAdminName,
  selectEmail,
  selectPassword,
} from "../../features/signup/selectors";
import { signupAsync } from "../../features/signup/operations";

const SignupConfirm: React.FC = (): JSX.Element => {
  const dispatch: AppDispatch = useDispatch();
  const [t] = useTranslation();

  const companyName = useSelector(selectCompany);
  const country = useSelector(selectCountry);
  const adminName = useSelector(selectAdminName);
  const adminMail = useSelector(selectEmail);
  const adminPassword = useSelector(selectPassword);

  const onSubmit = useCallback(() => {
    dispatch(
      signupAsync({
        companyName,
        country,
        dealerAccountId: 0,
        adminName,
        adminMail,
        adminPassword,
        acceptedTermsVersion: "",
        token: "",
      })
    );
  }, [dispatch, companyName, country, adminName, adminMail, adminPassword]);

  return (
    <main className={styles.main}>
      <div className={styles.mainSmall}>
        <div>
          <h1 className={styles.marginBtm1}>
            {t(getTranslationID("signupConfirmPage.text.title"))}
          </h1>
          <p className={styles.marginBtm2}>
            {t(getTranslationID("signupConfirmPage.text.pageExplanation"))}
          </p>
        </div>

        <section className="form">
          <dl className={`${styles.formList} ${styles.hasbg}`}>
            <dt className={styles.formTitle}>
              {t(getTranslationID("signupConfirmPage.text.accountInfoTitle"))}
            </dt>
            <dt>{t(getTranslationID("signupConfirmPage.label.company"))}</dt>
            <dd>
              <p className={styles.formConfirm}>{companyName}</p>
            </dd>
            <dt>{t(getTranslationID("signupConfirmPage.label.country"))}</dt>
            <dd>
              <p className={styles.formConfirm}>
                {COUNTRY_LIST.find((x) => x.value === country)?.label}
              </p>
            </dd>
            <dt className={styles.marginBtm1}>
              {t(getTranslationID("signupConfirmPage.label.dealer"))}
            </dt>
            <dd />

            <dt className={styles.formTitle}>
              {t(getTranslationID("signupConfirmPage.text.adminInfoTitle"))}
            </dt>
            <dt>{t(getTranslationID("signupConfirmPage.label.adminName"))}</dt>
            <dd>
              <p className={styles.formConfirm}>{adminName}</p>
            </dd>
            <dt>{t(getTranslationID("signupConfirmPage.label.email"))}</dt>
            <dd>
              <p className={styles.formConfirm}>{adminMail}</p>
            </dd>
            <dt className={styles.marginBtm1}>
              {t(getTranslationID("signupConfirmPage.label.password"))}
            </dt>
            <dd>
              <p className={styles.formConfirm}>**********</p>
            </dd>
            <dd className={`${styles.full} ${styles.alignCenter}`}>
              <input
                type="submit"
                name="submit"
                value={t(
                  getTranslationID("signupConfirmPage.label.signupButton")
                )}
                className={`${styles.formSubmit} ${styles.marginBtm1} ${styles.isActive}`}
                onClick={onSubmit}
              />
              <br />
              <input
                type="button"
                name="cancel"
                value={t(getTranslationID("common.label.cancel"))}
                className={styles.formButtonTx}
                onClick={() => {
                  dispatch(changePageState({ pageState: "input" }));
                }}
              />
            </dd>
          </dl>
        </section>
      </div>
    </main>
  );
};

export default SignupConfirm;
