import React, { useCallback, useEffect, useState } from "react";
import { Button } from "./button";
import { useDisplayName } from "./ConferenceCallManagerHooks";
import { FieldRow, InputField, ErrorMessage } from "./Input";
import { Modal, ModalContent } from "./Modal";

export function ProfileModal({ client, ...rest }) {
  const { onClose } = rest;
  const {
    success,
    error,
    loading,
    displayName: initialDisplayName,
    setDisplayName: submitDisplayName,
  } = useDisplayName(client);
  const [displayName, setDisplayName] = useState(initialDisplayName || "");

  const onChangeDisplayName = useCallback(
    (e) => {
      setDisplayName(e.target.value);
    },
    [setDisplayName]
  );

  const onSubmit = useCallback(
    (e) => {
      e.preventDefault();
      const data = new FormData(e.target);
      const displayName = data.get("displayName");
      console.log(displayName);
      submitDisplayName(displayName);
    },
    [setDisplayName]
  );

  useEffect(() => {
    if (success) {
      onClose();
    }
  }, [success, onClose]);

  return (
    <Modal title="Profile" isDismissable {...rest}>
      <ModalContent>
        <form onSubmit={onSubmit}>
          <FieldRow>
            <InputField
              id="displayName"
              name="displayName"
              label="Display Name"
              type="text"
              required
              autoComplete="off"
              placeholder="Display Name"
              value={displayName}
              onChange={onChangeDisplayName}
            />
          </FieldRow>
          {error && (
            <FieldRow>
              <ErrorMessage>{error.message}</ErrorMessage>
            </FieldRow>
          )}
          <FieldRow rightAlign>
            <Button type="button" variant="secondary" onPress={onClose}>
              Cancel
            </Button>
            <Button type="submit" disabled={loading}>
              {loading ? "Saving..." : "Save"}
            </Button>
          </FieldRow>
        </form>
      </ModalContent>
    </Modal>
  );
}