import { AppDispatch } from "app/store";
import {
  selectAdminName,
  selectCompany,
  selectCountry,
  selectEmail,
  selectInputValidationErrors,
} from "features/signup/selectors";
import {
  changeAdminName,
  changeCompany,
  changeCountry,
  changeEmail,
  changePageState,
  changePassword,
} from "features/signup/signupSlice";
import React, { useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { getTranslationID } from "translation";
import styles from "styles/app.module.scss";
import { COUNTRY_LIST } from "./constants";

const SignupInput: React.FC = (): JSX.Element => {
  const dispatch: AppDispatch = useDispatch();
  const [t] = useTranslation();
  const navigate = useNavigate();
  const [isPasswordHide, setIsPasswordHide] = useState<boolean>(true);
  const [isOpenPolicy, setIsOpenPolicy] = useState<boolean>(false);
  const [isAgreePolicy, setIsAgreePolicy] = useState<boolean>(false);
  const [isPushCreateButton, setIsPushCreateButton] = useState<boolean>(false);
  const {
    hasErrorEmptyAdminName,
    hasErrorEmptyCompany,
    hasErrorEmptyCountry,
    hasErrorEmptyEmail,
    hasErrorEmptyPassword,
    hasErrorIncorrectEmail,
    hasErrorIncorrectPassword,
  } = useSelector(selectInputValidationErrors);
  const onSubmit = useCallback(() => {
    if (
      hasErrorEmptyAdminName ||
      hasErrorEmptyCompany ||
      hasErrorEmptyCountry ||
      hasErrorEmptyEmail ||
      hasErrorEmptyPassword ||
      hasErrorIncorrectEmail ||
      hasErrorIncorrectPassword
    ) {
      return;
    }
    dispatch(changePageState({ pageState: "confirm" }));
  }, [
    dispatch,
    hasErrorEmptyAdminName,
    hasErrorEmptyCompany,
    hasErrorEmptyCountry,
    hasErrorEmptyEmail,
    hasErrorEmptyPassword,
    hasErrorIncorrectEmail,
    hasErrorIncorrectPassword,
  ]);

  const company = useSelector(selectCompany);
  const country = useSelector(selectCountry);
  const adminName = useSelector(selectAdminName);
  const email = useSelector(selectEmail);

  return (
    <div className={styles.wrap}>
      <header />
      <main className={styles.main}>
        <div className={styles.mainSmall}>
          <div>
            <h1 className={styles.marginBtm1}>
              {t(getTranslationID("signupPage.text.title"))}
            </h1>
            <p className={styles.marginBtm2}>
              {t(getTranslationID("signupPage.text.pageExplanation"))}
            </p>
          </div>
          <section>
            <form>
              <dl className={`${styles.formList} ${styles.hasbg}`}>
                <dt className={` ${styles.formTitle} ${styles.marginBtm0}`}>
                  {t(getTranslationID("signupPage.text.accountInfoTitle"))}
                </dt>
                <dt> {t(getTranslationID("signupPage.label.company"))}</dt>
                <dd>
                  <input
                    type="text"
                    size={64}
                    autoComplete="organization"
                    className={`${styles.formInput} ${
                      isPushCreateButton &&
                      hasErrorEmptyCompany &&
                      styles.isError
                    }`}
                    onChange={(e) => {
                      dispatch(changeCompany({ company: e.target.value }));
                    }}
                    value={company}
                  />
                  {isPushCreateButton && hasErrorEmptyCompany && (
                    <span className={styles.formError}>
                      {t(
                        getTranslationID("signupPage.message.inputEmptyError")
                      )}
                    </span>
                  )}
                </dd>
                <dt> {t(getTranslationID("signupPage.label.country"))}</dt>
                <dd>
                  <select
                    className={`${styles.formInput} ${
                      isPushCreateButton &&
                      hasErrorEmptyCountry &&
                      styles.isError
                    }`}
                    onChange={(event) => {
                      dispatch(changeCountry({ country: event.target.value }));
                    }}
                    value={
                      COUNTRY_LIST.find((x) => x.value === country)?.value ?? ""
                    }
                  >
                    {COUNTRY_LIST.map((x) => (
                      <option key={x.value} value={x.value}>
                        {x.label}
                      </option>
                    ))}
                  </select>
                  {isPushCreateButton && hasErrorEmptyCountry && (
                    <span className={styles.formError}>
                      {t(
                        getTranslationID("signupPage.message.inputEmptyError")
                      )}
                    </span>
                  )}
                  <span className={styles.formComment}>
                    {t(getTranslationID("signupPage.text.countryExplanation"))}
                  </span>
                </dd>
                <dt> {t(getTranslationID("signupPage.label.dealer"))}</dt>
                <dd>
                  <select className={styles.formInput}>
                    <option>Select dealer</option>
                    <option value="Tokyo">Tokyo</option>
                  </select>
                  <span className={styles.formComment}>
                    {t(getTranslationID("signupPage.text.dealerExplanation"))}
                  </span>
                </dd>
                <dt className={`  ${styles.formTitle} ${styles.marginBtm0}`}>
                  {t(getTranslationID("signupPage.text.adminInfoTitle"))}
                </dt>
                <dt> {t(getTranslationID("signupPage.label.adminName"))}</dt>
                <dd>
                  <input
                    type="text"
                    size={256}
                    autoComplete="organization"
                    className={`${styles.formInput} ${
                      isPushCreateButton &&
                      hasErrorEmptyAdminName &&
                      styles.isError
                    }`}
                    onChange={(e) => {
                      dispatch(changeAdminName({ adminName: e.target.value }));
                    }}
                    value={adminName}
                  />
                  {isPushCreateButton && hasErrorEmptyAdminName && (
                    <span className={styles.formError}>
                      {" "}
                      {t(
                        getTranslationID("signupPage.message.inputEmptyError")
                      )}
                    </span>
                  )}
                </dd>
                <dt> {t(getTranslationID("signupPage.label.email"))}</dt>
                <dd>
                  <input
                    type="text"
                    size={64}
                    autoComplete="organization"
                    className={`${styles.formInput}
                    ${
                      isPushCreateButton &&
                      (hasErrorEmptyEmail || hasErrorIncorrectEmail) &&
                      styles.isError
                    }`}
                    onChange={(e) => {
                      dispatch(changeEmail({ email: e.target.value }));
                    }}
                    value={email}
                  />
                  {isPushCreateButton && hasErrorEmptyEmail && (
                    <span className={styles.formError}>
                      {t(
                        getTranslationID("signupPage.message.inputEmptyError")
                      )}
                    </span>
                  )}
                  {isPushCreateButton && hasErrorIncorrectEmail && (
                    <span className={styles.formError}>
                      {t(
                        getTranslationID(
                          "signupPage.message.emailIncorrectError"
                        )
                      )}
                    </span>
                  )}
                </dd>
                <dt> {t(getTranslationID("signupPage.label.password"))}</dt>
                <dd className={styles.marginBtm1}>
                  <input
                    type={isPasswordHide ? "password" : "text"}
                    size={64}
                    className={`${styles.formInput} ${styles.password}
                    ${
                      isPushCreateButton &&
                      (hasErrorIncorrectPassword || hasErrorEmptyPassword) &&
                      styles.isError
                    }
                    `}
                    onChange={(e) => {
                      dispatch(changePassword({ password: e.target.value }));
                    }}
                  />
                  <span
                    className={styles.formIconEye}
                    onClick={() => {
                      setIsPasswordHide(!isPasswordHide);
                    }}
                    onKeyDown={() => {
                      setIsPasswordHide(!isPasswordHide);
                    }}
                    role="button"
                    tabIndex={0}
                    aria-label="IconEye"
                  />
                  {isPushCreateButton && hasErrorEmptyPassword && (
                    <span className={styles.formError}>
                      {t(
                        getTranslationID("signupPage.message.inputEmptyError")
                      )}
                    </span>
                  )}
                  {isPushCreateButton && hasErrorIncorrectPassword && (
                    <span className={styles.formError}>
                      {t(
                        getTranslationID(
                          "signupPage.message.passwordIncorrectError"
                        )
                      )}
                    </span>
                  )}
                  {/** XXX: 改行に対応するためにここでstyleを当てている。
                   * デザインを修正していただいたらもとに戻す
                   */}
                  <span
                    style={{ whiteSpace: "pre-line" }}
                    className={styles.formComment}
                  >
                    {t(getTranslationID("signupPage.text.passwordTerms"))}
                  </span>
                </dd>
                <dd className={`${styles.full} ${styles.alignCenter}`}>
                  <a
                    href="/"
                    target="_blank"
                    className={styles.linkTx}
                    onClick={() => {
                      setIsOpenPolicy(true);
                    }}
                  >
                    {t(getTranslationID("signupPage.label.termsLink"))}
                  </a>{" "}
                  {t(getTranslationID("signupPage.label.termsLinkFor"))} <br />
                  <label htmlFor="check-box">
                    <input
                      id="check-box"
                      type="checkbox"
                      className={styles.formCheck}
                      disabled={!isOpenPolicy}
                      onChange={(e) => {
                        setIsAgreePolicy(e.target.checked);
                      }}
                    />
                    {t(getTranslationID("signupPage.label.termsCheckBox"))}
                  </label>
                </dd>
                <dd className={` ${styles.full} ${styles.alignCenter}`}>
                  <input
                    type="button"
                    name="submit"
                    value={t(
                      getTranslationID("signupPage.label.createAccountButton")
                    )}
                    className={`${styles.formSubmit} 
                    ${isAgreePolicy && styles.isActive}
                    ${styles.marginBtm0}`}
                    onClick={() => {
                      setIsPushCreateButton(true);
                      onSubmit();
                    }}
                  />
                  <br />
                  <input
                    type="button"
                    name="cancel"
                    value={t(getTranslationID("common.label.cancel"))}
                    className={styles.formButtonTx}
                    onClick={() => {
                      navigate("/");
                    }}
                  />
                </dd>
              </dl>
            </form>
          </section>
        </div>
      </main>
    </div>
  );
};

export default SignupInput;
