text: import { useEffect, useRef, useState } from "react";
  import Form from "../../commons/Form";
  import Input from "../../commons/Input";
  
  function Headline({ id, text, fontSize, xPos, yPos, setHeadlines }) {
    const inputRef = useRef(null);
    const [isEditing, setIsEditing] = useState(false);
    useEffect(() => {
      isEditing && inputRef.current.focus();
    });
  
    const [inputValue, setInputValue] = useState(text);
    useEffect(() => {
      setInputValue(text);
    }, [text]);
  
    const getXPos = () => {
      let styles = {};
      switch (xPos) {
        case "Left":
          styles = { gridColumn: 1, textAlign: "left" };
          break;
        case "Right":
          styles = { gridColumn: 2, textAlign: "right" };
          break;
        case "Center":
          styles = {
            gridColumnStart: 1,
            gridColumnEnd: "span 2",
            justifySelf: "center",
            textAlign: "center",
          };
          break;
        default:
          break;
      }
      return styles;
    };
  
    const getYPos = () => {
      let styles = {};
      switch (yPos) {
        case "Top":
          styles = { gridRow: 1 };
          break;
        case "Bottom":
          styles = { gridRow: 3, alignSelf: "end" };
          break;
        case "Middle":
          styles = { gridRow: 2, alignSelf: "center" };
          break;
        default:
          break;
      }
      return styles;
    };
  
    const styles = {
      fontSize: fontSize,
      ...getYPos(),
      ...getXPos(),
    };
  
    const onSubmit = (e) => {
      e.preventDefault();
      setIsEditing(false);
    };
  
    const updateText = (e) => {
      setInputValue(e.target.value);
    };
  
    useEffect(() => {
      setHeadlines((previous) => {
        return previous.map((headline) => {
          if (headline.id !== id) return headline;
          return { ...headline, text: inputValue };
        });
      });
    }, [setHeadlines, id, inputValue]);
  
    useEffect(() => {
      setHeadlines((previous) => {
        return previous.map((headline) => {
          if (headline.id !== id) return headline;
          return { ...headline, text: inputValue };
        });
      });
    }, [setHeadlines, id, inputValue]);
  
    const onBlur = () => {
      setIsEditing(false);
    };
  
    return (
      <>
        {isEditing ? (
          <Form onSubmitHandler={onSubmit} styles={styles}>
            <Input
              value={inputValue}
              ref={inputRef}
              onChangeHandler={updateText}
              onBlurHandler={onBlur}
              additionalClasses="meme-preview__headline"
            />
          </Form>
        ) : (
          <p
            className="meme-preview__headline"
            onClick={() => setIsEditing(true)}
            style={styles}
          >
            {inputValue}
          </p>
        )}
      </>
    );
  }
  
  export default Headline;
  