import React from "react";
import Modal from "components/containers/modal/Modal";
import InputField from "components/controls/InputField";
import { useUserStore } from "../data/userSlice";

import classNames from "classnames";
import { useTranslation } from "react-i18next";
import { Formik } from "formik";

import * as Yup from "yup";
import { useUserViewModel } from "user/controller/userViewModel";
import { User } from "user/domain/userEntity";

type Props = {
  isShown: boolean;
  onClose: VoidFunction;
};

type FormValues = Pick<User, "username" | "firstname" | "lastname">;

type FormValuesValidation = {
  [Prop in keyof FormValues]: any;
};

export default function PersonalInfomrationEditor({
  isShown,
  onClose: extOnClose,
}: Props) {
  const { t } = useTranslation();
  const store = useUserStore();
  const { user, updatePersonalInfo } = useUserViewModel(store);

  const onClose = React.useCallback(() => {
    extOnClose();
  }, [extOnClose]);

  return (
    <Modal isOpen={isShown} onClose={onClose} className="max-w-lg">
      <Modal.Header>{t("account.info")}</Modal.Header>
      <Formik
        initialValues={{
          username: user?.username || "",
          firstname: user?.firstname || "",
          lastname: user?.lastname || "",
        }}
        validationSchema={Yup.object().shape<FormValuesValidation>({
          username: Yup.string()
            .min(2, "min 2 characters")
            .max(50, "50 characters max")
            .notRequired(),
          firstname: Yup.string()
            .min(2, "min 2 characters")
            .max(50, "50 characters max")
            .required("required field"),
          lastname: Yup.string()
            .min(2, "min 2 characters")
            .max(50, "50 characters max")
            .required("required field"),
        })}
        onSubmit={(values, actions) => {
          updatePersonalInfo(values)?.then(() => {
            onClose();
          });
        }}
      >
        {(formik) => (
          <form onSubmit={formik.handleSubmit}>
            <InputField
              name="username"
              placeholder="Nickname"
              value={formik.values.username}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              autoComplete="off"
              error={formik.errors.username}
              touched={formik.touched.username}
            />
            <InputField
              name="firstname"
              placeholder="Firstname"
              value={formik.values.firstname}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              error={formik.errors.firstname}
              touched={formik.touched.firstname}
            />
            <InputField
              name="lastname"
              placeholder="Lastname"
              value={formik.values.lastname}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              error={formik.errors.lastname}
              touched={formik.touched.lastname}
            />
            <Modal.Footer className="flex justify-between">
              
            </Modal.Footer>
          </form>
        )}
      </Formik>
    </Modal>
  );
}