import React, { Component } from 'react';
import PokemonList from "./components/pokemon-list";
import ConnectModal from "./components/connect-modal";

export class Have extends Component {
    constructor(props) {
        super(props);

        this.state = {
            pokemonList: [],
            open: false,
            pokemonWantList: [],
            visible: this.props.visible
        };
    }

    componentDidMount() {
        const { REACT_APP_BACKEND_URL } = process.env;
        fetch(REACT_APP_BACKEND_URL+'/api/stored-pokemon-have')
            .then(response => response.json())
            .then((data) => {
                this.setState({ pokemonList: data.pokemons });
            });
    }

    render() {
        const { REACT_APP_BACKEND_URL } = process.env;
        const {
            pokemonList, pokemonWantList, selectedId, linked,
        } = this.state;
        let { open } = this.state;

        const handleAddPokemonClick = () => () => {
            // window.location.href = '/chose.html?type=have';
        };

        const onSelectPokemon = (selected, url, id, deselect) => {
            fetch(REACT_APP_BACKEND_URL+'/api/stored-pokemon-want')
                .then(response => response.json())
                .then((data) => {
                    open = true;
                    fetch(REACT_APP_BACKEND_URL+'/api/linked-stored-pokemon')
                        .then(response => response.json())
                        .then((data2) => {
                            this.setState({
                                open, deselect, pokemonWantList: data, selectedId: id, linked: data2,
                            });
                        });
                });
        };

        const onDeselectPokemon = () => {
            const { deselect } = this.state;
            open = false;
            deselect();
            this.setState({ open, deselect: undefined });
        };

        const handleLinkWantAndNeed = groupId => () => {
            fetch(REACT_APP_BACKEND_URL+'api/linked-stored-pokemon', {
                method: 'POST',
                body: JSON.stringify({
                    group_id: groupId,
                    selected_id: selectedId,
                }),
            }).then(() => {});
        };


        return (
            <div>
                { this.state.visible &&
                <div>
                    <PokemonList pokemonList={pokemonList} onSelectPokemon={onSelectPokemon} />
                    <button style={{ fontSize: '10em' }} type="button" onClick={handleAddPokemonClick()}>Add</button>
                    <ConnectModal
                        pokemonWantList={pokemonWantList}
                        open={open}
                        onDeselectPokemon={onDeselectPokemon}
                        handleLinkWantAndNeed={handleLinkWantAndNeed}
                        linked={linked}
                        selectedId={selectedId}
                    />
                </div>
                }
            </div>

        );
    }
}