Untitled

import { useEffect, useState } from 'react';
import clipboard from 'clipboard-copy';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import {
  Container,
  Header,
  HeaderTitle,
  IconButton,
  LogoHeader,
  WrapperButtons,
  WrapperIconsFavorite,
  WrapperHeaderTitle,
} from './styles';
import shareImg from '../../images/share.svg';
import likeImg from '../../images/like.svg';
import dessertImg from '../../images/dessert.svg';

// const initialStateRecipe = {
//   strMeal: '',
//   strInstructions: '',
//   strMealThumb: '',
// };
export function RecipeInProgress() {
  const { id } = useParams();
  const [infoRecipes, setInfoRecipes] = useState([]);
  const [clipShare, setClipShare] = useState(false);
  const copyLink = clipboard;
  const navigate = useNavigate();
  const { pathname } = useLocation();
  const [ingredients, setIngredients] = useState<any>([]);
  console.log('doido', ingredients);

  useEffect(() => {
    function getRecipeById(idDaReceita: any) {
      const url = pathname.includes('meals') ? ('themealdb') : ('thecocktaildb');
      fetch(`https://www.${url}.com/api/json/v1/1/lookup.php?i=${idDaReceita}`)
        .then((response) => {
          if (response.ok) {
            return response.json();
          }
          throw new Error('Erro ao buscar as refeições');
        })
        .then((data) => {
          setInfoRecipes(Object.values(data)[0][0]);
          // setIngredients(data);
        }).catch((error) => {
          console.error('Erro ao buscar as refeições:', error);
        });
    }
    getRecipeById(id);
  }, [pathname, id]);

  // const { strMeal, strInstructions, strMealThumb } = recipe;
  const clipBoardRecipe = async () => {
    await copyLink(`${protocol}//${host}/${infoRecipes.type}s/${idDaReceita}`);
    setClipShare(true);
  };
  const handleCheck = (ingredient: any) => {
    if (ingredients.includes(ingredient)) {
      setIngredients(ingredients.filter((item: any) => item !== ingredient));
    } else {
      setIngredients([...ingredients, ingredient]);
    }
  };

  const buttonFinish = () => {
    return infoRecipes.length === ingredients.length;
  };

  const finalizandoReceita = () => {
    const receitasFeitas = JSON.parse(localStorage.getItem('doneRecipes') || '[]');
    localStorage.setItem('doneRecipes', JSON.stringify([...receitasFeitas, infoRecipes]));
    localStorage.setItem('doneRecipes', JSON.stringify([infoRecipes]));
    navigate('/done-recipes');
  };

  const ingredientsKeys = Object.keys(infoRecipes)
    .filter((key: any) => key.includes('strIngredient') && infoRecipes[key] !== ''
    && infoRecipes[key] !== null);

  return (
    <Container>
      <Header imgSrc={ infoRecipes.strMealThumb || infoRecipes.strDrinkThumb }>
        <WrapperIconsFavorite>
          <LogoHeader src={ dessertImg } />
          <WrapperButtons>
            <IconButton imgSrc={ shareImg } />
            <IconButton data-testid="favorite-btn" imgSrc={ likeImg } />
          </WrapperButtons>
        </WrapperIconsFavorite>
        <WrapperHeaderTitle>
          <HeaderTitle>{infoRecipes.strMeal || infoRecipes.strDrink}</HeaderTitle>
        </WrapperHeaderTitle>
      </Header>
      <h1 data-testid="recipe-title">{infoRecipes.strMeal || infoRecipes.strDrink}</h1>
      <img
        alt="imagem"
        src={ infoRecipes.strMealThumb || infoRecipes.strDrinkThumb }
        data-testid="recipe-photo"
      />
      <h3 data-testid="recipe-category">{infoRecipes.strCategory}</h3>
      <h3 data-testid="recipe-category">{infoRecipes.strAlcoholic}</h3>
      {ingredientsKeys.map((ingredient, index) => (
        <div key={ index } data-testid={ `${index}-ingredient-name-and-measure` }>
          <label
            data-testid={ `${index}-ingredient-step` }
            className={ ingredients.includes(ingredient) ? 'checked' : '' }
          >
            <input
              type="checkbox"
              checked={ ingredients.includes(infoRecipes[ingredient]) }
              onChange={ () => handleCheck(infoRecipes[ingredient]) }
            />
            {infoRecipes[ingredient]}
          </label>
        </div>
      ))}
      <h2>Instructions</h2>
      <p data-testid="instructions">{infoRecipes.strInstructions}</p>

      <button
        onClick={ finalizandoReceita }
        data-testid="finish-recipe-btn"
        disabled={ !buttonFinish() }
      >
        Finalizar receita
      </button>
      <button onClick={ () => clipBoardRecipe() }>
        {clipShare && <p>Link copiado!</p>}
        <img src={ shareImg } alt="share" data-testid="share-btn" />
      </button>

    </Container>
  );
}