import React, {useEffect, useState} from 'react';
import WantGroup from './components/want-group';
import {useRecoilState} from "recoil";
import {viewAtom} from "./atom/atom";

export function Want(props) {
    const [view, setView] = useRecoilState(viewAtom);
    let [pokemonWantList, setPokemonWantList] =  useState([]);
    const visible = props.visible;

    useEffect(() => {
        const { REACT_APP_BACKEND_URL } = process.env;
        fetch(REACT_APP_BACKEND_URL+'/api/stored-pokemon-want')
            .then(response => response.json())
            .then((data) => {
                setPokemonWantList(data);
            });
    });

    const handleEditPokemonClick = wantGroupId => () => {
        setView('choose')
    };

    const { REACT_APP_BACKEND_URL } = process.env;
    const handleDeletePokemonClick = wantGroupId => () => {
        fetch(REACT_APP_BACKEND_URL+'api/stored-pokemon-want', {
            method: 'DELETE',
            body: JSON.stringify({ id: wantGroupId }),
        }).then(response => response.json())
            .then((data) => {
                setPokemonWantList(data);
            });
    };
    const handleAddPokemonClick = () => () => {
        fetch(REACT_APP_BACKEND_URL+'api/stored-pokemon-want', {
            method: 'POST',
        }).then(response => response.json())
            .then((data) => {
                setPokemonWantList(data);
            });
    };

    const wantGroups = [];
    pokemonWantList.forEach((wantGroup) => {
        wantGroups.push(<WantGroup
            pokemonList={wantGroup.pokemons}
            groupId={wantGroup.id}
            groupName={wantGroup.group_name}
            handleEditPokemonClick={handleEditPokemonClick}
            handleDeletePokemonClick={handleDeletePokemonClick}
        />);
    });

    return (
        <div>
            {visible &&
            <div>
            {wantGroups}
                <button className="addButton" style={{fontSize: '10em'}} type="button" onClick={handleAddPokemonClick()}>Add</button>
            </div>
            }
        </div>
    );
}