import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { faCheck } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

import { Button, FormControl, Input } from "@app/components/v2";

type Props = {
  orgName?: string;
  onOrgNameChange: (name: string) => Promise<void>;
};

const formSchema = yup.object({
  name: yup.string().required().label("Project Name")
});

type FormData = yup.InferType<typeof formSchema>;

export const OrgNameChangeSection = ({ onOrgNameChange, orgName }: Props): JSX.Element => {
  const {
    handleSubmit,
    control,
    reset,
    formState: { isDirty, isSubmitting }
  } = useForm<FormData>({ resolver: yupResolver(formSchema) });
  const { t } = useTranslation();

  useEffect(() => {
    reset({ name: orgName });
  }, [orgName]);

  const onFormSubmit = async ({ name }: FormData) => {
    await onOrgNameChange(name);
  };

  return (
    <form onSubmit={handleSubmit(onFormSubmit)}>
      <div className="mb-6 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-6 pt-3">
        <p className="mb-4 mt-2 text-xl font-semibold">{t("common.display-name")}</p>
        <div className="mb-2 w-full max-w-lg">
          <Controller
            defaultValue=""
            render={({ field, fieldState: { error } }) => (
              <FormControl isError={Boolean(error)} errorText={error?.message}>
                <Input placeholder="Type your org name" {...field} />
              </FormControl>
            )}
            control={control}
            name="name"
          />
        </div>
        <Button
          isLoading={isSubmitting}
          color="primary"
          variant="outline_bg"
          size="sm"
          type="submit"
          isDisabled={!isDirty || isSubmitting}
          leftIcon={<FontAwesomeIcon icon={faCheck} />}
        >
          {t("common.save-changes")}
        </Button>
      </div>
    </form>
  );
};