import { ChangeEvent, FormEvent } from "react";
import Input from "../../ui/Input";
import useStreamStore from "../../../stores/useStreamStore";
import Button from "../../ui/Button";
import useModalStore from "../../../stores/useModalStore";

interface Props {
  onAction: () => void;
}

function SetNameModal({ onAction }: Props) {
  const { name, setName } = useStreamStore();
  const { setModal } = useModalStore();

  function handleChangeName(e: ChangeEvent<HTMLInputElement>) {
    setName(e.target.value);
  }

  function handleClickNoName() {
    setName("Guest");
    setModal(null);
    onAction();
  }

  function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setModal(null);
    onAction();
  }

  return (
    <div className="flex items-center justify-center w-full h-full bg-opacity-50 backdrop-blur-2xl">
      <div className="bg-white sm:p-12 p-6 sm:rounded-lg space-y-6 sm:h-auto h-full sm:w-auto w-full flex flex-col max-sm:justify-center">
        <p className="text-2xl font-semibold">Здравствуйте!</p>
        <div className="space-y-2">
          <p className="font-semibold">Представьтесь, пожалуйста</p>
          <p className="text-sm text-[#77828C]">
            Так мы будем знать, как к вам обратиться
          </p>
        </div>
        <form onSubmit={handleSubmit} className="space-y-10">
          <div className="space-y-1 text-xs">
            <p className="text-[#77828C]">Имя</p>
            <Input
              value={name}
              onChange={handleChangeName}
              autoFocus={!name}
              required
              className="max-sm:w-full"
            />
          </div>
          <div className="flex gap-2">
            <Button
              variant="secondary"
              type="submit"
              large
              onClick={handleClickNoName}
              className="max-sm:w-full"
            >
              Не указывать
            </Button>
            <Button type="submit" large className="max-sm:w-full">
              Продолжить
            </Button>
          </div>
        </form>
      </div>
    </div>
  );
}

export default SetNameModal;
